Collection Items - Hover Effect - Athens theme

Store Design
, ,

Topic summary

A user seeks to implement a hover effect that zooms only the product image on collection pages using the Athens theme. They provide an example website demonstrating the desired effect and mention specific items where they want this applied.

Solution Provided:

  • Another user shares CSS code to be added to the base.css file
  • The code targets a specific Shopify section ID and applies a scale transform (1.09) to .card-overlay-media elements on hover
  • Includes a 0.4s ease-in-out transition for smooth animation

Status: The discussion appears resolved with a working CSS solution, though no confirmation from the original poster is included.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hello!

I’m wondering if it’s possible to add a hover effect where just image zooms in. Here’s a perfect example of this effect.

https://welovestreets.com/collections/exclusive-2019?gclid=CjwKCAiAs8acBhA1EiwAgRFdw5Qd1vYm9D1sRXG7S3gH8fFhPFOle18Ao8egU00kF80Sn7oKtXZIlBoC8LMQAvD_BwE

I have also attached an ss to the items I want to include it on.

shop: artgex.myshopify.com - pass: Superpowers123

Screen Shot 2022-12-08 at 11.55.49 AM.png
Screen Shot 2022-12-08 at 11.55.49 AM.png1110×986 177 KB

2

Hi @David123123 ,

Go to Assets > base.css and paste this at the bottom of the file:

#shopify-section-template--17001530163516__c0e79860-35de-4ac6-8ed5-4972964daf1a .card-overlay-media {
  transition: .4s ease-in-out;
}
#shopify-section-template--17001530163516__c0e79860-35de-4ac6-8ed5-4972964daf1a .card-overlay:hover .card-overlay-media {
  transform: scale(1.09);
}

Hope it helps!