This tutorial will show you how to show Gallery titles as an overlay on hover in Squarespace. This will work for Squarespace 7.1 only.

Showing gallery titles as an overlay on hover in Squarespace can improve user experience, enhance the design of the website, and save space on the webpage. It allows visitors to preview the title/description on an image before clicking on it.

Complexity: Easy

Step 1

To add captions to images in Gallery Sections in Squarespace 7.1, follow these steps:

1. Add a Gallery Section to your page.

2. Select the Picture Icon to add your images.

3. Add a description to each image by selecting the image and entering the description in the "Add a Description" field.

4. Click on the pencil icon to edit the Gallery Section settings.

5. Turn captions on in the Gallery Section settings.

6. By default, the captions will appear beneath each image.

Step 2

The next step will be to add the css code

Step 3

You will need to adjsut the these CSS values to suit your needs

background-color: rgba(0,255,255,0.7); // Set the color and opacity of the caption overlay
font-size: 1rem !important; // Font size
color: #000000; // Set the font color for the caption content
align-items: center; // Gallery text alignment - options are right, left, center
justify-content: center; // vertical alignment of gallery text - options are flex-start, flex-end, center

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.