Grid Gallery Captions on Hover | Squarespace 7.1
** Updated March 21, 2024 **
In Squarespace 7.1, you can add captions to the images in Gallery Sections. To do this you first add a Gallery Section. Then select the Picture Icon, add your images and then add a description to each image. Finally, click on the pencil icon and turn captions on. As a default, these captions appear beneath each image.
In this video, I show you how to customize the captions so that they appear overtop the image on hover. All the code used in the video is provided below.
Step 1: Add your gallery.
The first step is to add a Gallery section. Make sure you have the Grid: Simple Gallery selected and captions turned on. You can also choose to have the Lightbox turned on. Then add your captions to your images.
Note: This code is set to work with the Grid: Simple Gallery. The code needed to apply this effect to other Galleries is available for Encyclopedia of Code Members. Click here to see how you can get access.
Step 2: Add the Code
Copy and paste the following code into Design > Custom CSS.
Note: This code now works with clickthrough links and a lightbox. No additional code required.
Note 2: You cannot have a clickthrough link and a lightbox. Make sure you have removed all links in order for the lightbox to work.
/* REBECCA GRACE DESIGNS */
/* Grid Gallery Captions on Hover */
.gallery-grid .gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); // overlay color
height: 100%;
padding: 0;
opacity: 0;
pointer-events: none;
}
.gallery-grid .gallery-caption-wrapper {
display: flex;
align-items: center; // center caption box vertically
justify-content: center; // center caption box horizontally
}
.gallery-grid .gallery-caption-content {
font-size: 1rem !important; // caption font size
color: white; //caption font color
padding: 1vw; // padding around the caption
text-align: center; // center text within caption box
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
max-width: unset;
}Then edit the colors and positioning.
