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? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword HighlighterIf you find my answer fit your need, 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