Gallery Hover Caption - SquareSpace 7.1

While building our portfolio page, we wanted to have a simple caption on each image. Unfortunately, SquareSpace’s native galleries do not allow for customization of the placement and style of gallery image descriptions. Fortunately, we found this blog post! Unfortunately, the code provided did not work perfectly out of the box.

Oh no! The caption does not stay centred when it spans two lines of content!!

Not to worry! We worked out a fix!

Note: This requires the use of code injection. Code injection is only available on Business plans and above at the time of this post. Code injection may lead to unexpected consequences. Use our contact page to get in touch if you would like a professional to implement this for you instead!

Note 2: This code is specific to the Grid Simple layout of Gallery sections.

The following goes on your Page Settings > Advanced > Code Injection:

<style>
.gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  /* overlay color */
  height: 100%;
  max-width: unset;
  padding: 0;
  opacity: 0;
}

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

.gallery-caption-content {
  font-size: 1rem !important;
  /* caption font size */
  color: white;
  /*caption font color */
  text-align: center;
  /*padding: 16px;*/
  max-width: 85%;
}

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

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

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

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