All Images are getting zoom..

Store Design
, , , , , , , ,

Topic summary

A Shopify store owner is experiencing an issue where all product images zoom simultaneously on hover, but wants only one image to zoom at a time.

Problem Details:

  • Occurs on product pages (example: Cloud Wing Ultralight Backpacking Tent)
  • Current behavior: hovering triggers zoom on multiple images
  • Desired behavior: isolated zoom effect per image

Proposed Solutions:

Two CSS-based fixes were suggested:

  1. Add to theme.css file:
.product-gallery__media-list-wrapper:hover img {
  scale: 1.2;
  transition: 0.5s;
}
  1. Alternative CSS solution:
.product-gallery__media.span-center {
  overflow: hidden;
}

Both solutions involve editing the theme.css file through the Shopify admin (Online Store > Themes > Actions > Edit code). The discussion remains open with no confirmation of which solution resolved the issue.

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

Currently, All Images are getting zoomed when we hover on product image, want only 1 image to get zoom at a time.

Checkout URL: https://redpandaoutdoor.in/products/cloud-wing-ultralight-backpacking-tent

Screenshot 2024-10-15 104317.png
Screenshot 2024-10-15 104317.png1896×907 198 KB

i had added this code in ---------> themes --------------> actions ------> edit code------->theme.css
at the end of the file and save.

.product-gallery__media-list-wrapper:hover img {

scale: 1.2;

transition: .5s;

}

2

This can be done by modifying the code file

3

Hi @Emiway1

Please add this code to theme.css file to solve this issue

.product-gallery__media.snap-center { overflow: hidden; }