How to disable zoom when hoovering over a product on every page on my shopify store?

Store Design
, , , ,

Topic summary

A Shopify store owner encountered an unwanted zoom effect when hovering over product images, which was cutting off their logo positioned in the top right corner. They also wanted to remove border lines appearing on product image corners.

Solutions Provided:

Multiple community members offered CSS-based fixes to disable the hover zoom:

  • Method 1: Add CSS to component-card.css file targeting .card-wrapper hover effects
  • Method 2: Insert code into base.css file to disable .media--hover-effect transforms
  • Method 3: Use Theme Settings > Custom CSS field for a simpler implementation without editing theme files directly

All solutions use transform: unset !important; or transform: none !important; to override the default zoom behavior.

Outcome:

The original poster confirmed one solution worked successfully. Another user also reported success with the fix. The border line issue mentioned at the end remains unaddressed in the current discussion.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

I am having trouble with disabling the slight zoom when hovering over any product on the website, it is very annoying because I have my logo on the top right and when you hover over an image it cuts half of the logo out, example picture below!

Screenshot 2024-06-24 at 13.52.30.png
Screenshot 2024-06-24 at 13.52.30.png1882×773 240 KB

Screenshot 2024-06-24 at 13.52.48.png
Screenshot 2024-06-24 at 13.52.48.png1898×773 254 KB

As you can see in the second picture I have hovered over the second product resulting in a slight zoom for some reason, I am also struggling to get rid of the little borders that appear around my products.

2

Hey @GrooveHideout

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hello here is the store URL https://groovehideout.com

4

Hello @GrooveHideout

to disable zoom of image when hover on it, you just need to follow below steps.

  1. Go to admin > Online store > edit code.

  2. In the code directory, find the file name “component-card.css”.

  3. Copy below mentioned code and paste it at the end of the file.

.card-wrapper.product-card-wrapper.underline-links-hover:hover .media.media--hover-effect img {
  transform: unset !important;
}
  1. After adding the code ,save the file and check the output

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

2 Likes
5

Hello @GrooveHideout

  • Here is the solution for you
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.media--hover-effect img {
 transform: none !important;
}
  • Here is the result you will achieve:

BSSTekLabs_0-1719232686262.png
BSSTekLabs_0-1719232686262.png1833×746 258 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
6

@GrooveHideout Please follow below steps to disable zoom on hover. Let me know whether it is helpful for you.

  1. From admin go to “Online Store” → “Themes”.
  2. Click “Customize” button from the current theme.
  3. Click “Theme setting” icon, then scroll down and locate “Custom CSS” field.

Vinsinfo_0-1719233581832.png
Vinsinfo_0-1719233581832.png500×280 8.97 KB

  1. Paste the below code in the “Custom CSS” field and save changes.
.card-wrapper:hover .media--hover-effect img {
    transform: unset !important;
}

Vinsinfo_1-1719233720982.png
Vinsinfo_1-1719233720982.png424×781 26.8 KB

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

7

This worked thank you! I am also wondering if you would know how to get rid of the little border lines that appear on my pictures on all 4 corners?

8

This worked perfectly for me! : ) Thank you!