Herculiam Posted November 28, 2021 Share Posted November 28, 2021 Site URL: https://www.johanneswarnke.com/press I want an overlay of the vogue logo and white background to cover this gallery and then, on mouse hover, to disappear to reveal the image gallery - does anyone know how I would achieve this? best, liam Link to comment
Beyondspace Posted November 28, 2021 Share Posted November 28, 2021 (edited) 2 hours ago, Herculiam said: Site URL: https://www.johanneswarnke.com/press I want an overlay of the vogue logo and white background to cover this gallery and then, on mouse hover, to disappear to reveal the image gallery - does anyone know how I would achieve this? best, liam You can try adding to Home > Design> Custom Css /*setting hover overlay for gallery -- start*/ section[data-section-id="619fda0177250e49b8b8b30c"] .gallery-reel-item .gallery-reel-item-src:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; transition: opacity 1s ease; background: url('https://images.unsplash.com/photo-1638064867432-8d3e00905d6e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=436&q=80'); background-size: cover; background-repeat: no-repeat; background-position: center; opacity: 1; } section[data-section-id="619fda0177250e49b8b8b30c"] .gallery-reel-item:hover .gallery-reel-item-src:after { opacity: 0; } /*setting hover overlay for gallery -- end*/ Let me know how it works on your site Press 👍 or mark this answer as solution to help another one too Edited November 28, 2021 by bangank36 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted November 28, 2021 Share Posted November 28, 2021 My testing result with my image hover_gallery.mp4 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Herculiam Posted November 28, 2021 Author Share Posted November 28, 2021 (edited) That looks great! I just copied and pasted this code into my custom CSS and it doesn't seem to work. Also, I see the overlay's are on each individual image - would there be a way to just have this overlay on the entire gallery as just one overlay? Thanks Edited November 28, 2021 by Herculiam Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment