Re: Dawn 2.0 - How to disable image zoom on hover

Solved

Dawn 2.0 - How to disable image zoom on hover

jbk1
Excursionist
24 3 5

There's no option for this in theme editor so I'm trying to find and adjust the css that's triggers this zoom on  hover effect, but I cannot find it. (Commenting out `.product__modal-opener--image .product__media-toggle:hover {cursor: zoom-in;}` does not stop it, so this can't be the effect). Thanks

Accepted Solution (1)
jbk1
Excursionist
24 3 5

This is an accepted solution.

The effect in question is the `transform: scale(1.03);` effect which in Dawn 2.0 resides in `assets/component_card.css` in three places:

 1) .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.03);
}

 

2) .card-wrapper:hover .media.media--hover-effect > img + img {
opacity: 1;
transition: transform var(--duration-long) ease;
transform: scale(1.03);
}

 

3) .card-wrapper:hover .card--search img {
transform: scale(1.05);
}

View solution in original post

Replies 8 (8)

Shay
Shopify Staff (Retired)
3110 472 659

Hi @jbk1 

 

I checked in with my theme support team about this question to see if this is a customization request they would support. They said that isn't a feature our in house theme support would look at removing and that the reason it was included in the Dawn theme was to increase accessibility. The slight zoom makes it easier for customers with low vision or mobility to know they have their cursor over the right product or area of the store. 

 

They did recommend considering an Out of the Sandbox theme, which has tutorials on how to remove the image zoom with mouse hover: OOTS - Disable Hover to Zoom on Product Page images.

Shay | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

jbk1
Excursionist
24 3 5

Hi @Shay , thanks for asking the at your end. I understand the accessibility pov, though this zoom feature negatively impacts the visual design. The edges of images that I'm using are important to render and this zoom effect zooms the image within a fixed frame which itself does not zoom, therefore un-zoomed image looks fine with edges rendered intact, hover and image auto zooms and chops the edges of the image off because of the fixed frame within which image is zoomed. So really my question is where can I find the selector creating this effect so that I can override it, and or the fixed frame within which the image is rendered so that I can zoom that also on hover? Thanks

jbk1
Excursionist
24 3 5

This is an accepted solution.

The effect in question is the `transform: scale(1.03);` effect which in Dawn 2.0 resides in `assets/component_card.css` in three places:

 1) .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.03);
}

 

2) .card-wrapper:hover .media.media--hover-effect > img + img {
opacity: 1;
transition: transform var(--duration-long) ease;
transform: scale(1.03);
}

 

3) .card-wrapper:hover .card--search img {
transform: scale(1.05);
}

Smeelah
Navigator
373 1 115

Glad to find this info. 

 

I agree with the Idea of zoom for ecommerce and accessibility. However, my product photos are already macro and it looks pretty awful on mobile. 

AaronMPG
Tourist
11 0 2

I believe they have since updated the Dawn theme. The provided code is no longer in that file. Do you know if they moved it? Or is it completely removed from our control now?

Tim_Kline
Excursionist
32 0 4

I'm working on my site during this relatively quiet post Christmas rush period, and disabling the hover zoom is the last thing on my list. Several people have commented that it is a distracting feature, and my images are large enough. So I found the section of code in the 'assets/component_card,css' file, but what do I do to disable the code? Simply remove it, or put a snippet of some code to have it ignored, or change the 1.05 to 1? Makes me nervous, as I know nothing about coding... Thanks. Here is the code from my site:

 

}

.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.03);
}

.card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-child) {
opacity: 0;
}

.card-wrapper:hover .media.media--hover-effect > img + img {
opacity: 1;
transition: transform var(--duration-long) ease;
transform: scale(1.03);
}

hensonhenson
Shopify Partner
1 0 0

Hi @Tim_Kline ,

Just modify the two instances of '(1.03)' to '(1.00)' to stop the images from scaling.

 

There are 10 types of people in the world. Those that understand binary and those that don't.
CoastChimes
Visitor
2 0 0

Thanks. I posted that a long time ago, and got it figured out. Appreciate you help, though.