Help zoom hover on Product image

Hi everyone !

I've spent a couple of hours hopelessly trying to figure out how to modify the scale zoom effect on hovering the product image.

You can check the following page: https://www.creativemattersinc.com/stock/p/test 

When I hover the product image, it is zoomed in so much that we can see the image quality deteriorating. I've checked on DevTools and see that the affected class is "product-image-zoom-duplicate loaded" and the applied style is "transform: scale (5)", which justifies why the image is zoomed in so much. I'd like the style to be reduced to "transform: scale (1.5)".

I don't know if I can change this directly in Squarespace default settings or I should apply some CSS, so far I haven't found any convenient solution,  I tried to apply this code but it doesn't seem to work, neither by adding the :hover state.

.product-image-zoom-duplicate {
  transform: scale (1.5) !important 
}

Strangely enough, when I change it to " transform: none !important", the instruction was followed and the zoom effect is no longer applicable.

When I checked other ecommerce website built on Squarespace with the zoom hover effect on products, it seems that the default scale zoom is 1.5 o 1.75, never as high as 5 so I don't understand how it was set that much ...

Anyone has an idea?

Thanks a lot in advance for your help !

27 minutes ago, vinh said:

When I hover the product image, it is zoomed in so much that we can see the image quality deteriorating. When I checked other ecommerce website built on Squarespace with the zoom hover effect on products, it seems that the default scale zoom is 1.5 or 1.75, never as high as 5.

I can reproduce the same issue - the zoom level is too high. It only allows the user to zoom in on a tiny portion of the product:

I recommend you report this to Squarespace to see if this is a known issue with the product hover zoom feature at the moment. Let us know how you get on.

Did this help? Please give feedback by clicking an icon below  ⬇️