Shopify themes, liquid, logos, and UX
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?
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:
This CSS targets the .lumin-gallery__image or .lumin-gallery__image-wrapper class, which typically controls the hover behavior.
Disable Any Animation Effects (Optional):
Some themes also apply a subtle scaling effect as a CSS animation. To disable this, add:
This removes any scaling transition that might occur on hover.
Save and Test the Change:
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!
Unfortunately, both fixes did not work. Still zooms on hover. 😞
Hi @fox3535
Please, share your store URL. Thanks!
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024