Disable Zoom on Hover for Product Images

[KimGottwald]

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

[LizHoang]

Hi @KimGottwald ,

You can disable the Zoom effect by following the instruction here:

1. Go to Shopify > Online store > Theme > Customize > open Custom CSS

2. 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;
    }
  }