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.