A user wants to remove the zoom-on-hover effect from product images because it causes edges to be cut off. They provided screenshots showing the issue and shared their store preview link.
Solution provided:
transform: scale(1) !important to prevent the zoom animationThe discussion appears resolved with a straightforward CSS customization solution.
Hi everyone,
I’d like to remove the zoom effect that occurs when hovering over product images, as it causes the edges to be cut off (please see attached photos). Is there a way to disable this zoom effect in Shopify?
Here’s my store preview link: https://www.rappid.run/collections/frontpage
Password: Password
Thank you for any advice!
Best,
Kim
Hi @KimGottwald ,
You can disable the Zoom effect by following the instruction here:
Go to Shopify > Online store > Theme > Customize > open Custom CSS
Copy the code and paste to the section
@media screen and (min-width: 990px) {
.card-wrapper:hover .media.media--hover-effect>img+img {
transform: scale(1) !important;
}
}