GK5 Standard Mode overlay instead of scale

Hello,
what I'm trying to achieve is to have, at the :hover, the thumbnails overlayed with the basic style color (I'm using Creativity template) instead of having them zooming in and out.

I think that this is the part I have to work on:

.nspArt .nspImageWrapper img {
-webkit-transition: all .18s linear;
-moz-transition: all .18s linear;
-ms-transition: all .18s linear;
-o-transition: all .18s linear;
transition: all .18s linear;
}
.nspArt .nspImageWrapper:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

but I frankly do not get how...

Is someone keen to help?

Thank very much in advance

Matteo

To disable scaling, Please edit: /templates/gk_creativity/css/override.css and add at its end:

Code: Select all

.nspArt .nspImageWrapper:hover img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}


Remember to enable "CSS override" in template settings - advanced section.

Hello Cyberek,
maybe I did not make myself clear...was I was trying to achieve was to have an overlay color as :hover effect. What I don't get is how to get it...
Reducing scaling to 1 is pretty straightforward and I had it, but then I tried many different ways to obtain the overlay color and I simply did not succeed.
But maybe is something that goes beyond your support....

Thank you

Matteo
Matteo

Hello,
I finally obtained the desired effect.

I turned the problem around setting a background color to .nspArt .nspImageWrapper.
Then, on .nspArt .nspImageWrapper:hover img I reduced the scaling on hover to 1 and added an opacity 0.8.

It works.

Thank you

M

That was what I was going to suggest. Doing it other way, using pseudoelements positioned absolutely and 100% width/100% height might also be possible but might also require some additional css changes.

Perfect then.

Thank you again for your time.

M

No problem