How To Add Zoom In Effect On Hover To Collection Images

Store Design
, , , , ,

Topic summary

A user seeks help adding a zoom-in hover effect to collection list images on their Shopify store, providing example sites and their own URL for reference.

Initial Solution Attempt:

  • A responder provides CSS code targeting .image-with-text .gradient with a scale transform on hover
  • The original poster clarifies they need this for the collection list, not the image-with-text section

Alternative Approach:

  • The poster suggests modified CSS targeting .collection-list .gradient instead
  • Confusion arises about which page section needs the effect—the responder references an “image with text” section while the poster wants it for “shop by category”

Current Status:

  • Multiple users report the proposed solutions are not working
  • Specifically noted as ineffective on the Symmetry theme
  • The discussion remains unresolved with no confirmed working solution

The core issue appears to be correctly identifying the CSS selector for the specific collection list element that needs the hover zoom effect.

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

Hello Shopify Team,

Can anyone pls tell me how to zoom into the collection list on hover.

for example: www.bellavitaorganic.com , https://ishalife.sadhguru.org/in/

my url: www.faithandyou.in

password: hello

Thanks

1 Like
2

Hi @AryavK

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.image-with-text .gradient {
    transition: transform 0.3s ease-in-out;
}
.image-with-text .gradient:hover {
    transform: scale(1.1);
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

umm…

@Made4uo-Ribe

I think that is for image with text, not collection list

4

we can try

Go To Theme> Actions > Edit Code > Base.css

Add this to the bottom of the file

.collection-list .gradient {
    transition: transform 0.5s ease-in-out;
}
.collection-list .gradient:hover {
    transform: scale(1.0202);
}
5

This is your collection right?

Made4uoRibe_0-1704728394874.png
Made4uoRibe_0-1704728394874.png1480Ă—803 155 KB

Its on the image with text section. It not on the collection.list. If the selector you used are working then try to take out my code in the base.css.

Made4uoRibe_1-1704728585092.png
Made4uoRibe_1-1704728585092.png507Ă—264 12.3 KB

1 Like
6

no no no, the thing above it, shop by category

7

Did this work for anyone? I tried it and its not working.

8

It did not work on the Symmetry theme.