Grid Gallery Captions on Hover | Squarespace 7.1

What does this code do?

This code snippet will allow you to show the image captions for Grid Gallery Sections on Hover.

Note: The code will differ depending on the type of Gallery Section you are using. These snippets are specifically for Grid: Simple, Grid: Strips, and Grid: Masonry Gallery Sections.

Grid: Simple

Add your Gallery Section and your images. Add descriptions for your images as these will be the captions that are displayed. Set your Gallery Type to Grid: Simple and turn on Captions.

Code Snippets

Copy and paste the following code into Design > Custom CSS

.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 vertically */
  justify-content: center; /* center horizontally */
}
.gallery-grid .gallery-caption-content {
 font-size: 1rem !important; /* caption font size */
   color: white; /*caption font color */
}
.gallery-grid-item {
  position: relative;
}
.gallery-grid-item:hover .gallery-caption {
  opacity: 1;
}
.gallery-caption-grid-simple {
  transition-delay: 0ms;
  max-width: unset;
}

To edit the overlay colour, change the background of the .gallery-captions to the colour of your choice.

This code is set up to center the caption vertically and horizontally. You can change this by changing the word center in the .gallery-caption-wrapper to flex-start or flex-end.

Lightbox

If you have added the Lightbox effect to your images, add the following code to Design > Custom CSS.

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

Grid: Strips

Add your Gallery Section and your images. Add descriptions for your images as these will be the captions that are displayed. Set your Gallery Type to Grid: Strips and turn on Captions.

Code Snippets

Copy and paste the following code into Design > Custom CSS

.gallery-strips .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-strips .gallery-caption-wrapper{
  display: flex;
  align-items: center; /* center vertically */
  justify-content: center; /* center horizontally */
}
 .gallery-strips .gallery-caption-content {
 font-size: 1rem !important; /* caption font size */
   color: white; /*caption font color */
}
.gallery-strips-item {
  position: relative;
}
.gallery-strips-item:hover .gallery-caption {
  opacity: 1;
}
.gallery-caption-grid-strips {
  transition-delay: 0ms;
  max-width: unset;
}

To edit the overlay colour, change the background of the .gallery-captions to the colour of your choice.

This code is set up to center the caption vertically and horizontally. You can change this by changing the word center in the .gallery-caption-wrapper to flex-start or flex-end.

Lightbox

If you have added the Lightbox effect to your images, add the following code to Design > Custom CSS.

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

Grid: Masonry

Add your Gallery Section and your images. Add descriptions for your images as these will be the captions that are displayed. Set your Gallery Type to Grid: Masonry and turn on Captions.

Code Snippets

Copy and paste the following code into Design > Custom CSS

.gallery-masonry .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-masonry .gallery-caption-wrapper{
  display: flex;
  align-items: center; /* center vertically */
  justify-content: center; /* center horizontally */
}
.gallery-masonry .gallery-caption-content {
 font-size: 1rem !important; /* caption font size */
   color: white; /*caption font color */
}
.gallery-masonry-item {
  position: relative;
}
.gallery-masonry-item:hover .gallery-caption {
  opacity: 1;
}
.gallery-caption-grid-masonry {
  transition-delay: 0ms;
  max-width: unset;
}

To edit the overlay colour, change the background of the .gallery-captions to the colour of your choice.

This code is set up to center the caption vertically and horizontally. You can change this by changing the word center in the .gallery-caption-wrapper to flex-start or flex-end.

Lightbox

If you have added the Lightbox effect to your images, add the following code to Design > Custom CSS.

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

Troubleshooting: I followed your instructions exactly but the Lightbox link still isn’t working.

This is probably because of a site-wide animation you have on your site. You will need to add in the following code based on your gallery and site wide animation.

Fade Animation

SELECTOR .preFade, SELECTOR  .fadeIn {
  transform: none !important;
  opacity: 1 !important;
}

Scale Animation

SELECTOR .preScale,  SELECTOR .scaleIn  {
  transform: none !important;
  opacity: 1 !important;
}

Slide Animation

SELECTOR .preSlide, SELECTOR .slideIn {
  transform: none !important;
  opacity: 1 !important;
}

Clip Animation

SELECTOR .preClip, SELECTOR .clipIn {
  transform: none !important;
  animation: none;
  clip-path: none;
  -webkit-clip-path: none;
}

Flex Animation

SELECTOR .preFlex, SELECTOR .flexIn {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  clip-path: none !important;
}

Then change SELECTOR to the selector that matches your gallery type.

/* Gallery Simple */
.gallery-grid

/* Gallery Strip */
.gallery-strip

/* Gallery Masonry */
.gallery-masonry

How To Use It

1. Set up your Gallery and select one of the Grid Options. Then add descriptions to your images to use as your captions.

2. Copy and paste the code as indicated above.

3. Edit the Overlay Colour and the Caption Alignment.

4. If using a click through link or lightbox, add the additional code.