Remove Hover Image Effect in Studio Theme

Store Design
, , , ,
1

Hello,

I would like to remove the hover image effects from the landing page and collection pages. Can someone please advise how I can edit this for the Studio Theme?

Thanks in advance!

2

Hi @GIREGGIA ,

Go to Assets > base.css and paste this at the bottom of the file:

.card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) {
	opacity: 1 !important;
}
.card-wrapper:hover .media.media--hover-effect>img+img {
	opacity: 0 !important;
    transition: none !important;
    transform: none !important;
}

Hope it helps!

3

Hello @GIREGGIA
I would like to give you some recommendations to support you
You can try follow this path:
Themes => edit code => Layout => theme.liquid
and add this code to before tag :

Hope my recommendation can works and support for you!
Kind & Best regards!
GemPages Support Team

4

Hi @GIREGGIA ,

This is PageFly - Free Landing Page Builder.

You can add this code at the very bottom of your CSS file

.card:hover .media.media–hover-effect>img:first-child:only-child, .card-wrapper:hover .media.media–hover-effect>img:first-child:only-child {
transform: unset !important;
}

Hope this can help you solve the issue.

Best regards,

PageFly

5

Hi @LitExtension @GemPages @PageFly-Victor

Sorry I don’t think I was clear. I want to remove the zoom/bouncing feature in the hover but I still want to retain the hover over function where you see the second image when you put your mouse over it.

6

Hi @GIREGGIA ,

Go to Assets > base.css and paste this at the bottom of the file:

.card-wrapper:hover .media.media--hover-effect>img+img {
    transform: none !important;
}

Hope it helps!

7

Hi @GIREGGIA ,

Yes, the code I gave is to remove the zoom/bouncing effect on the image.

8

@PageFly-Victor thanks, it only seems to work for the landing page. how can i do this for the collection pages? i want the product images to switch to the 2nd image when you hover over with the mouse but i don’t want the zooming effect.

9

Hi @GIREGGIA ,

I’m sorry to say this but it is the theme function, there is nothing much we can do about it.

Best,

Victor