Gallery Hover Overlay

Add hover overlays to your Squarespace gallery images. Squarespace 7.1 removed native hover effects, but you can bring them back with CSS.

Why this matters

Image hover overlays tell visitors that gallery items are clickable and give context before they commit to clicking. Squarespace 7.1 stripped out native gallery hover effects, leaving portfolio sites and photographers without a critical interaction pattern. This CSS brings it back with full customization.

/* Gallery Hover Overlay: Full Cover */
.gallery-grid .gallery-grid-item {
  position: relative;
  overflow: hidden;
}

.gallery-grid .gallery-grid-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  pointer-events: none;
}

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

/* Preserve image clickability */
.gallery-grid .gallery-grid-item a {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}

How to add this to Squarespace

1. Copy the CSS code above.
2. Go to Design → Custom CSS in your Squarespace dashboard.
3. Paste the code at the bottom of the editor.
4. Click Save and hover over any gallery grid image to see the overlay.
5. Using “Image Title” text:If you selected the “Image Title” option, Squarespace uses the image filename or title metadata. To display custom titles per image, edit each image’s title in the Gallery editor, then use a Summary Block which exposes title text via its markup.
6. Important: The generated CSS uses pointer-events: none on the overlay so images remain clickable. If you add interactive elements inside the overlay, you will need to adjust this property.