How to remove hover zoom in effect on products? DAWN THEME

Store Design
1

Is there a way to remove the hover transform zoom in effect of the product cards, PLEASE REFER THE VIDEO IN THE ATTACHMENTS DOWN BELOW FOR CLARIFICATION

What I want to happen is when the user hovers over the product card, the product images should not zoom in or have any kind of effect

Thank you

Store URL: https://abbasigems.myshopify.com/

Store Password: testingpage

2

Hi @justauser
Happy to help you with this issue.

Please follow the below article to fix the issue
https://help.outofthesandbox.com/hc/en-us/articles/115006910347-Disable-Hover-to-Zoom-on-Product-Page-images#:~:text=Supported%20Versions&text=You%20can%20disable%20the%20zoom,%22magnify%20on%20hover%22%20setting.

3

hi @justauser ,

This is suggestion to you.

You can add the short code bellow at the bottom of assets/base.css file.

@media only screen and (min-width: 990px){

.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 can helpful to you!

4

Hello @justauser

Please use below code on assets → base.css at the bottom to remove zoom feature

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

1 Like
5

Thank you! it worked!

1 Like