AWolf Posted December 26, 2022 Share Posted December 26, 2022 Hi! I'm looking to add custom css so that in my gallery grid block the title of the image appears on hover with a slight color overlay (white text, greyed out image), instead of the title appearing below. I need to make sure that the click through links still work, and that on a mobile site where there isn't "hover" the title is just always visible. Any help would be very appreciated! I can only find code for 7.1... BethH 1 Link to comment
Beyondspace Posted December 27, 2022 Share Posted December 27, 2022 18 hours ago, AWolf said: Hi! I'm looking to add custom css so that in my gallery grid block the title of the image appears on hover with a slight color overlay (white text, greyed out image), instead of the title appearing below. I need to make sure that the click through links still work, and that on a mobile site where there isn't "hover" the title is just always visible. Any help would be very appreciated! I can only find code for 7.1... Can you share your site with the protected password so I can take a look? 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
AWolf Posted December 27, 2022 Author Share Posted December 27, 2022 2 hours ago, Beyondspace said: Can you share your site with the protected password so I can take a look? Sorry not sure what you mean by "protected password" but the test page I made to try this with is: http://www.alexawolf.com/narrative-test Thank you for the help! Link to comment
tuanphan Posted December 29, 2022 Share Posted December 29, 2022 On 12/28/2022 at 12:02 AM, AWolf said: Sorry not sure what you mean by "protected password" but the test page I made to try this with is: http://www.alexawolf.com/narrative-test Thank you for the help! Add to Design > Custom CSS /* .slide hover */ .slide a:after { content: ""; display: block; background: rgb(128, 0, 128, 0.5); position: absolute; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: all 0.3s; } .slide:hover a:after { opacity: 1; transition: all 0.3s; } /* Show overlay on hover */ .slide:hover .image-slide-title { opacity: 1; } /* move title over overlay + hide it initial */ .image-slide-title { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 70%; text-align: center; color: white; opacity: 0; z-index: 1000; transition: all 0.5s; pointer-events: none; white-space: initial !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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