Show Gallery Titles as an Overlay on Hover in Squarespace

The gallery section feature in Squarespace 7.1 is a great way of display a collection of images. But sometimes it looks better to have the image captions appear on hover instead of being displayed below the image. Here’s how you can do that.


Before

Show Gallery Titles as an Overlay on Hover in Squarespace - Before.PNG

After

Show Gallery Titles as an Overlay on Hover in Squarespace - After.jpg

Demo


The CSS

Copy and paste the following code into DESIGN → CUSTOM CSS.

If you want it to only apply to specific pages, click the GEAR icon beside the page name, then go to ADVANCED and paste the code into the PAGE HEADER CODE INJECTION and add <style> above the code and </style> below the code.

.gallery-caption { position: absolute; top: 0; left: 0; /* You can replace the color here with a different color */ background-color: rgba(255,255,255,0.7); height: 100%; max-width: unset; padding: 0; opacity: 0; -webkit-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1); -moz-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1); -o-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1); -ms-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1); transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1); } .gallery-caption-content { /* You can change the color of your image caption here */ color: #000000; /* You can change the color of your image caption here */ font-size: 22px !important; font-weight: 400; } .gallery-caption-grid-simple { transition-delay: 0ms; } .gallery-caption { pointer-events: none; } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-wrapper { display: flex; align-items: center; justify-content: center; } /* The code below is optional, all it does is have the titles display by default on mobile since mobile doesn't have a "hover" */ @media only screen and (max-width: 640px) { .gallery-grid-item .gallery-caption { opacity: 1; } .gallery-grid-item .gallery-caption { background: rgba(255,255,255,0.4) !important; } .gallery-grid-item:hover .gallery-caption { background-color: unset !important; } }
Vigasan

Hey! I’m Vigasan and I love the Internet. I have a Bachelor of Science in Computing Systems with a double specialization in Computer Science and Software Engineering. I’ve been creating websites and working with social media since 2014 and have created over 200 Squarespace websites so far.

https://www.adlyticmarketing.com/
Previous
Previous

Change the Mobile Address Bar Color in Squarespace

Next
Next

Add Text to the Shopping Cart Page in Squarespace