Solved

How can I disable the image zoom on hover effect in Craft?

BaNK3r
Tourist
8 1 1

Hi,

I've been trying to find the option to turn off the zoom effect when I hover a product on my collection page. But there is none, and I've been searchng for the effect in my code but can't find it. Is it possible to remove this effect?

Accepted Solution (1)
Nakul7420
Shopify Partner
5 2 3

This is an accepted solution.

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save


.card:hover .media.media--hover-effect>img:first-child:only-child, .card-wrapper:hover .media.media--hover-effect>img:first-child:only-child {
transform: scale(1) !important;
}
.card-wrapper:hover .media.media--hover-effect>img+img {
transform: scale(1) !important;
}

Hope that my solution works for you.

Best regards,
Nakul

View solution in original post

Replies 6 (6)

Nakul7420
Shopify Partner
5 2 3

Yes, it is possible to do it from your admin page. Under the Customize theme area of your page, go to the Product Page section. Uncheck the Show second image on hover checkbox https://prnt.sc/DuGa-FrMIOu3

BaNK3r
Tourist
8 1 1

But I want the second image to show. And even if I turn off that setting, the zooming effect is still there.

Nakul7420
Shopify Partner
5 2 3

This is an accepted solution.

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save


.card:hover .media.media--hover-effect>img:first-child:only-child, .card-wrapper:hover .media.media--hover-effect>img:first-child:only-child {
transform: scale(1) !important;
}
.card-wrapper:hover .media.media--hover-effect>img+img {
transform: scale(1) !important;
}

Hope that my solution works for you.

Best regards,
Nakul

BaNK3r
Tourist
8 1 1

My savior, thank you so much!

Nakul7420
Shopify Partner
5 2 3

You're welcome @BaNK3r 😊

hello2023
Tourist
4 0 0

Sometimes I think I'm crazy to care enough to make slight visual changes like this so it's reassuring to find others in the same position and even better to find the solutions ! Thanks!