Image zooms in on hover

Image zooms in on hover

fox3535
Visitor
2 0 1

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?

Replies 3 (3)

VipulBudhiraja
Excursionist
60 5 7
  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
Visitor
2 0 1

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

Made4uo-Ribe
Shopify Partner
8870 2121 2605

Hi @fox3535 

Please, share your store URL. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.