How change ovelay effect module NSP GK5

Hi,

I've installed the Quickstart template on Joomla 3.X and would like to change the ovelay effect of the module NSP GK5.

What I like is the ovelay cover the picture and when the pointer gets over the picture then the ovelay gets out of the picture.
Also I will like the text titel will be over the overlay.

Thank you in advance

Hello,

I'm not sure if I understand correctly but please try to add at the end of the css/gk.stuff.css file the following code fragment:

Code: Select all

/* NSP GK5 Title Overlay Portal Mode override */
.gkNspPM-TitleOverlay .gkImgOverlay {
  left: 0;
}
.gkNspPM-TitleOverlay[data-textpos="top"] > figure > figcaption {
  z-index: 2;
}

Hi Dziudek,

Thank you for your help, that was close but still is not what I want. I will try to explain what I really want.

On the Rockwall template, when the pointer gets over the picture on the module NSP GK5, the overlay slides over the picture and the picture has a growing and turning effect as well.

What I need is this:

1.- The overlay must cover the picture as default but not the titel
2.- When the pointer gets over the picture, the overlay slide back and shows the picture and the titel as well.
3.- The picture must keep his original growing and turning effect.

Once again, thank you very much for your support.

So please try the following code:

Code: Select all

/* NSP GK5 Title Overlay Portal Mode override */
.gkNspPM-TitleOverlay .gkImgOverlay {
  left: 0;
  opacity: 0.75;
}
.gkNspPM-TitleOverlay.hover .gkImgOverlay {
  opacity: 0;
  left: -30%;
}
.gkNspPM-TitleOverlay[data-textpos="top"] > figure > figcaption {
  z-index: 2;
}

Hi Dziudek,

Great..!!! That is what I want.... thanks a lot....!
Just one small problem, Not all NSP GK5 modules shows the titels. How can we solve the small issue?
here the link:
http://grantlimousine.com/grantdemo/

Right, please replace my code to:

Code: Select all

/* NSP GK5 Title Overlay Portal Mode override */
.gkNspPM-TitleOverlay .gkImgOverlay {
  left: 0;
  opacity: 0.75;
}
.gkNspPM-TitleOverlay.hover .gkImgOverlay {
  opacity: 0;
  left: -30%;
}
.gkNspPM-TitleOverlay[data-textpos="top"] > figure > figcaption,
.gkNspPM-TitleOverlay[data-textpos="bottom"] > figure > figcaption {
  z-index: 2;
}

Hi Dziudek

wicked...!!!!!
Great support...many thnx..!

See you around.

Hi Dziudek,

please can u help me to add a new overlay style for Video. Something like you have on News 2 temp. Here is example:

Thank you!

@edinn: you can try to add module suffix video-link and then add this code at the end of css/gk.stuff.css file:

Code: Select all

.video-link .gkNspPM-TitleOverlay .gkImgOverlay:before {
color: #fff;
content: "\f0a4";
font-family: FontAwesome;
font-size: 64px;
position: absolute;
bottom: 50%!important;
right: 50%;
margin: 0 -32px -32px 0;
}

of course you have change the following line value:

Code: Select all

content: "\f0a4";

to other icon code i.e.:

Code: Select all

content: "\f04b";

http://fontawesome.io/icon/play/

Thank you DZIUDEK, but there is still same icon on mouse overlay:

Screen Shot 2014-04-10 at 21.28.30.png

Screen Shot 2014-04-10 at 21.25.46.png

Please try to use !important in the content property.

Please try to use !important in the content property.

Nice, Thank you dziudek.

Its so fany, problem was in a Quotation Marks and TextEditor format. OMG!

Thank you One more time