Style Image Caption on Hover in Squarespace 7.1

In the Squarespace 7.1 Editor, you have the option of having an image caption display on hover in inline image blocks.

However, you do not have many options for styling this caption.

In this video, I show you style the image caption on hover in Squarespace 7.1. Keep in mind this technique will only apply to Inline Image Blocks. All the code used in the video is provided below.

The following code is used in the video.

/* Image Captions on Hover*/
.image-caption-wrapper {
  min-height: 100%;
  display: flex;
  align-items: center; /*vertically centered */
  justify-content: center; /*text align center*/
  background: rgba(255, 255, 255, 0.2) !important; /* Background Overlay*/
}

.image-caption-wrapper p {
  color: red !important; /* font color of caption */
}

Update #1: Clickable Links

If you have added a click through link to your image, this will make the link hidden. You have two options to correct this.

Method #1: Add a Link to Your Caption.

Add the click-through link to your caption. Then add the following code to Design > Custom CSS to edit the color of the caption font.

.image-caption-wrapper a {
color: blue !important; /* font color of caption */
}

Method #2: Use CSS to Bring the Link Forward

Thank you to a member of our community Ariel Estulin for sending in this solution!! Add the following code to Design > Custom CSS.

.sqs-block-image-link:after {
content:'';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}

Update #2: Lightbox

If you have added a Lightbox effect to your image, this will make the lightbox not work. To correct this, add the following code to Design > Custom CSS.

.lightbox:after {
content:'';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}

Here are some other posts you may like:

• Autoplay Carousel Summary Blocks

• Add an Arrow to the Read More Blog Link

• Change the Colour of the Cookie Banner in Squarespace