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.

 
Gallery Captions on Hover.jpg
 

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.

 
 
Rebecca Grace

Rebecca Grace is a Squarespace CSS Expert and Website Designer.

https://rebeccagracedesigns.com
Previous
Previous

Everything You need to Know to Set up a Newsletter in Squarespace

Next
Next

Writing Your Web Design Contract: What to Include and Best Practices