designbyamber Posted November 29, 2021 Share Posted November 29, 2021 Site URL: https://sturgeon-bamboo-52ac.squarespace.com/portfolio https://sturgeon-bamboo-52ac.squarespace.com/portfolio I would like to have a caption show when someone hovers over an image, with an overlay as well. Is this possible? Beyondspace 1 Link to comment
Beyondspace Posted November 29, 2021 Share Posted November 29, 2021 1 hour ago, designbyamber said: Site URL: https://sturgeon-bamboo-52ac.squarespace.com/portfolio https://sturgeon-bamboo-52ac.squarespace.com/portfolio I would like to have a caption show when someone hovers over an image, with an overlay as well. Is this possible? You can try .gallery-grid-item { position: relative; } .gallery-caption { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .gallery-grid-item-wrapper:after { content: ""; display: block; width: 100%; height: 100%; position: absolute; } .gallery-grid-item:hover .gallery-grid-item-wrapper:after { background: rgba(255, 255, 255, 0.3); } .gallery-grid-item:hover .gallery-caption { opacity: 1; } Let me know how it works on your site Press 👍 or mark this answer as solution to help another one too 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, Lightbox Studio pluginIf 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
designbyamber Posted November 30, 2021 Author Share Posted November 30, 2021 @bangank36 How do I make the overlay text white and bold? Thank you! https://sturgeon-bamboo-52ac.squarespace.com/portfolio Beyondspace 1 Link to comment
designbyamber Posted November 30, 2021 Author Share Posted November 30, 2021 @bangank36 I noticed the css made it so the image links do not work - do you know how to fix? Also want to make overlay text white. Link to comment
Beyondspace Posted November 30, 2021 Share Posted November 30, 2021 (edited) At the my moment, it works on my testing, have you added my codes? portfolio hover.mp4 About the text, have you turned on the caption of gallery? I can not find it now Edited November 30, 2021 by bangank36 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, Lightbox Studio pluginIf 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment