zoom effect

On instyle template I want to disable zoom effect and find some suggestions on the forum, on of them was :

Code: Select all

.nspArt .nspImageWrapper:hover img,
.gkNspPM-TitleOverlay:hover .gkImgOverlay,
.gkNspPM-TitleOverlay > figure:hover > img
 {
   -webkit-transform: none;
   -moz-transform: none !important;
   -ms-transform: none !important;
   -o-transform: none !important;
   transform: none !important;
}

but it does not work for me ( I put this CSS in template advanced settings, custom CSS tab wit override css ON. I even uploaded separate override.css with this code, but still no luck.

Hi,
I suppose that you have read my guide: http://www.gavick.com/documentation/gen ... ox-effect/

please show me your website where exactly you have it - DETAIL URL (not global!!) you have this zoom effect and I will try to help.

It is on category view.
Yes my action are based on your link.

http://fatu-shop.com/index.php/women-category

You have this effect because of this code.

guily_code.png

So please use following My New code to remove this effect:

Code: Select all

.category > div > a:hover > img,
.product > div > div > a:hover > img {
transform: scale(1) rotateZ(0deg);
}

Strange, but I still have zoom and rotate effect. Put your code and cleared cache.

Code: Select all

.category > div > a:hover > img,
.product > div > div > a:hover > img {
transform: scale(1) rotateZ(0deg);
}

[/quote]

Are you sure?
Because under Firefox I don't see Zoom effect anymore on those girls photos.

p.s.
ok I think I know, we need prefix for other browsers.

Code: Select all

-webkit-transform: scale(1) rotateZ(0deg);
-moz-transform: scale(1) rotateZ(0deg);
-o-transform: scale(1) rotateZ(0deg);
-ms-transform: scale(1) rotateZ(0deg);

add also this inside { }

That worked. Thanks.

Are you sure?
Because under Firefox I don't see Zoom effect anymore on those girls photos.

p.s.
ok I think I know, we need prefix for other browsers.

Code: Select all

-webkit-transform: scale(1) rotateZ(0deg);
-moz-transform: scale(1) rotateZ(0deg);
-o-transform: scale(1) rotateZ(0deg);
-ms-transform: scale(1) rotateZ(0deg);

add also this inside { }

Strange thing happened. I updated my override css and it worked, after one hour it was the same (on firefox it is turned off, on opera it is on). So tried to replace code again and got a little bit confused.

How does exactly code should look ?

Code: Select all

.product > div > div > a:hover > img {
-webkit-transform: scale(1) rotateZ(0deg);
-moz-transform: scale(1) rotateZ(0deg);
-o-transform: scale(1) rotateZ(0deg);
-ms-transform: scale(1) rotateZ(0deg);
.category > div > a:hover > img,
transform: scale(1) rotateZ(0deg);
}

Are you sure?
Because under Firefox I don't see Zoom effect anymore on those girls photos.

p.s.
ok I think I know, we need prefix for other browsers.

Code: Select all

-webkit-transform: scale(1) rotateZ(0deg);
-moz-transform: scale(1) rotateZ(0deg);
-o-transform: scale(1) rotateZ(0deg);
-ms-transform: scale(1) rotateZ(0deg);

add also this inside { }

Code: Select all

.category > div > a:hover > img,
.product > div > div > a:hover > img {
transform: scale(1) rotateZ(0deg);
-webkit-transform: scale(1) rotateZ(0deg);
-moz-transform: scale(1) rotateZ(0deg);
-o-transform: scale(1) rotateZ(0deg);
-ms-transform: scale(1) rotateZ(0deg);
}

or

Code: Select all

.category > div > a:hover > img,
.product > div > div > a:hover > img {transform:none !important; -webkit-transform:none; -ms-transform:none; -moz-transform:none;}

As you see it's time to learn some CSS basic