Make image zoom in on hover

Store Design
, ,
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: