Skip to content
All Answers
Gallery

How do I style gallery image captions in Squarespace?

Gallery captions in Squarespace 7.1 use the .sqs-gallery-caption or .gallery-caption selector depending on gallery type. You can change their font, background, position, and visibility behavior.

A popular pattern is showing captions only on hover with a dark overlay background. This keeps the gallery clean while making caption text available on interaction.

/* Style caption text */
.sqs-gallery-design-grid-slide .margin-wrapper .image-slide-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-transform: none;
}

/* Caption overlay background */
.sqs-gallery-design-grid-slide .margin-wrapper .image-slide-description {
  background-color: rgba(0, 0, 0, 0.7) !important;
  padding: 12px 16px !important;
}

/* Show captions only on hover */
.sqs-gallery-design-grid-slide .image-slide-description {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sqs-gallery-design-grid-slide:hover .image-slide-description {
  opacity: 1;
}
Design gallery captions with our Gallery Hover Overlay toolTry it free →

Related Questions

Gallery

How do I add a hover overlay to gallery images in Squarespace?

Gallery

How do I change the spacing between gallery images in Squarespace?

A little over your head?

No shame — this stuff is hard. Let the pros handle it.

Long Drive MarketingTalk to Long Drive Marketing →