Make image zoom in on hover

Store Design
, ,

Topic summary

A user wants to add a hover zoom animation to images in a section with three background colors (blends, drip bags, instant), similar to an existing collection list section below it.

Solution provided:

  • Initial CSS code targets .section-carousel__block img with a transform: scale(1.05) on hover
  • Due to a Shopify Customizer bug, the code needed to be placed in Theme Settings > Custom CSS instead of the section’s Custom CSS field
  • The user successfully implemented the zoom effect

Additional request:

  • User also wanted to make the images clickable based on a provided link
  • A more complex CSS solution was offered that works around an underline animation issue, using pseudo-elements and positioning adjustments
  • The final solution was accepted and working

Multiple CSS approaches were shared by different contributors, with variations in selectors (.section-carousel__media img vs .section-carousel__block img).

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

Hello,

I’d like the area with 3 background colours (blends, drip bags, instant) to animate the image on hover, like the collection list section below it does. What CSS do I need?

Thanks so much!

Screenshot 2025-06-05 at 1.16.40 PM.png
Screenshot 2025-06-05 at 1.16.40 PM.png3016×1386 321 KB

https://8nn2yts4ix8zzwy1-71241957534.shopifypreview.com p/w: ablohd

2

Put this into “Custom CSS” setting of this section:

.section-carousel__block img{
  transition: transform var(--duration-extra-long) ease;
  overflow: hidden;
}
.section-carousel__block:hover img{
  transform: scale(1.05);
}
3

Hi Tim, thanks for that. I still can’t get it to work even when I’ve added this. Any other ideas?

4

Looks like a bug in Shopify Customizer – the code in sections “Custom CSS” is not properly processed at the moment, hopefully it will be fixed soon.

Try “Custom CSS” under “Theme settings” (cog icon on the left in Customizer).

5

Yay! It worked. I wanted just the img, so I just added img at the end of the selector. Thanks so much!

Any chance you’d know what code to add so I can make the image clickable based on the link provided below too?

6

Hi @kirsten11123 ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.section-carousel__media img {
  transition: transform 0.4s ease-in-out;
}

.section-carousel__block:hover .section-carousel__media img {
  transform: scale(1.05);
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! :rocket: (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

7

Unfortunately, you can’t do this cleanly with CSS only because of this underline animation.

The closest is to try this code (rather then the one I gave before:

.section-carousel__block .section-multitile__content--button {
  position: static;
}
.section-carousel__block .section-multitile__content--button:after {
  bottom: 3rem;
  max-width: 70%;
}
.section-multitile__content--button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  height: 100%;
}

.section-carousel__block img{
  transition: transform var(--duration-extra-long) ease;
}

.section-carousel__block:hover img {
  transform: scale(1.05);
}
8

I love this! Thank you :slightly_smiling_face: