Disabling zoom on Collection list media if hovering over

Store Design
, , ,

Topic summary

A user is seeking help to disable the zoom effect that occurs when hovering over media elements in a collection list on their Shopify store.

Proposed Solution:

  • Add CSS code to the Base.css file
  • The CSS targets .card:hover .media.media--hover-effect>img elements
  • Uses transform: scale(1) !important; to prevent the zoom animation

Status:

  • The discussion appears to have a suggested technical fix but lacks confirmation of whether the solution was tested or resolved the issue
  • No follow-up from the original poster indicating success or requesting further assistance
Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

https://6a0203-f3.myshopify.com/

2

Add This css in your Base.css File

.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) !important;
}
1 Like