Show Gallery Titles as an Overlay on Hover in Squarespace

The gallery section feature in Squarespace 7.1 is a great way of display a collection of images. But sometimes it looks better to have the image captions appear on hover instead of being displayed below the image. Here’s how you can do that.

---

Before

After

Demo

---

The CSS

Copy and paste the following code into DESIGN → CUSTOM CSS.

If you want it to only apply to specific pages, click the GEAR icon beside the page name, then go to ADVANCED and paste the code into the PAGE HEADER CODE INJECTION and add <style> above the code and </style> below the code.

.gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
  /* You can replace the color here with a different color */
  background-color: rgba(255,255,255,0.7); 
  height: 100%;
  max-width: unset;
  padding: 0;
  opacity: 0;
  -webkit-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1);
  -moz-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1);
  -o-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1);
  -ms-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1);
  transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1);
}

.gallery-caption-content {
  /* You can change the color of your image caption here */
  color: #000000;
  /* You can change the color of your image caption here */
  font-size: 22px !important;
  font-weight: 400;
}

.gallery-caption-grid-simple {
  transition-delay: 0ms;
}

.gallery-caption {
  pointer-events: none;
}

.gallery-grid-item {
  position: relative;
}

.gallery-grid-item:hover .gallery-caption {
  opacity: 1;
}

.gallery-caption-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The code below is optional, all it does is have the titles display by default on mobile since mobile doesn't have a "hover" */
@media only screen and (max-width: 640px)
{
  .gallery-grid-item .gallery-caption {
    opacity: 1;
  }

  .gallery-grid-item .gallery-caption {
    background: rgba(255,255,255,0.4) !important;
  }

  .gallery-grid-item:hover .gallery-caption {
    background-color: unset !important;
  }
}