Remove hover effect over collection, featured collection, product images - Dawn 7.0.1 theme

Store Design
, , , ,

Topic summary

A user seeks to remove the hover animation effect on product images in Shopify’s Dawn 7.0.1 theme while keeping images static.

Proposed Solutions:

  • Add custom CSS code to the base.css file targeting .card-wrapper:hover .media.media--hover-effect>img:first-child:only-child
  • Insert a <style> block with similar CSS above the </body> tag in theme.liquid

Implementation Challenges:

  • The original poster tried both methods without success, suggesting potential conflicts with their theme/base files
  • Another user reported that while the CSS successfully removed the hover effect, it broke clickable links on collection images, making them unresponsive

Current Status:

  • One participant confirmed the solution worked for them
  • The issue with broken links after applying the fix remains unresolved
  • The original poster is still seeking alternative approaches or troubleshooting guidance
Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hello

I would like to remove the animation hover on my product images, how can that be done in a easy way?

If you move the mouse pointer over the images you will se a little animation, i want to remove that so i just want still photo without moving. Thanks in advance. :slightly_smiling_face:

My url:

www.dekanten.no

2

Hey @Dekanten

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

Moeed_0-1690964340306.png
Moeed_0-1690964340306.png1138×922 181 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Hi @Dekanten

Please add this CSS code at the bottom of your base.css file to remove hover affect on image

.card-wrapper:hover .media.media--hover-effect>img:first-child:only-child {
    transform: none !important;
}
4

@Dan-From-Ryviu @Moeed I tried both methoods but they didnt work, maybe are my base/theme files messed up or something, anywhere else i can try this codes? :slightly_smiling_face:

5

You can open theme.liquid file, add this code above tag
6

@Dan-From-Ryviu I tried the code several places without luck, anything else we can try out? You are the masters @Moeed :slightly_smiling_face:

7

This CSS effectively disables the transformation effect applied to the images on hover. However, after making this change, the links that allow clicking on the images to be redirected to the corresponding collection no longer work. Has anyone encountered a similar issue or can anyone suggest what might be causing the clickable links to become unresponsive? Any help would be greatly appreciated!

8

THANK YOU!!!

I have tried sooo many things and other people’s answers and only YOU fixed the issue!!!

so THANK YOU!!!

1 Like