Image zooms in on hover

[fox3535]

Using lumin theme (Olivia). My image banner when using the 'lumin gallery' section keeps zooming in on hover.

Tried every code trick in the book, no help. 

Any ideas?

[VipulBudhiraja]

1. Add Custom CSS to Stop Hover Zoom:

   • Go to Online Store > Themes > Actions > Edit Code.

   • In the Assets folder, locate your main CSS file, which is usually named theme.css or theme.scss.liquid.

   • At the bottom of this file, add the following CSS to override the zoom effect on hover:

     css

     Copy code

     /* Prevent zoom on hover for the Lumin Gallery section */ .lumin-gallery__image:hover { transform: none !important; } .lumin-gallery__image-wrapper:hover img { transform: none !important; }

   • This CSS targets the .lumin-gallery__image or .lumin-gallery__image-wrapper class, which typically controls the hover behavior.

2. Disable Any Animation Effects (Optional):

   • Some themes also apply a subtle scaling effect as a CSS animation. To disable this, add:

     css

     Copy code

     .lumin-gallery__image { transition: none !important; } .lumin-gallery__image-wrapper img { transition: none !important; }

   • This removes any scaling transition that might occur on hover.

3. Save and Test the Change:

   • Save the changes and refresh your storefront. Hover over the image in the Lumin Gallery section to check if the zoom effect has been removed.

These custom styles should effectively prevent the zoom on hover without affecting the rest of the gallery styling. Let me know if you encounter further issues!

---

Boost your store experience with the Debales AI Chatbot on Shopify! Engage visitors and offer support in real-time—let’s chat!

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

[fox3535]

Unfortunately, both fixes did not work. Still zooms on hover. 😞

[Made4uo-Ribe]

Hi @fox3535 

Please, share your store URL. Thanks!