Sleek Masonry Gallery Section design in Squarespace with caption overlay and hover mode (7.1)

Jun 6

Today’s tutorial is a little bit different.

We’re not fixing any issues or dealing with common customizations.

Instead, we’ll be building a really cool and flexible look for the Gallery Section Grid: Masonry in Squarespace 7.1.

This CSS trick may come in handy on those projects where you want to use these type of sections as a portfolio of sorts, where each image leads to a case study, or a post, or even a secondary image gallery.

So, if you’re interested in learning how to achieve this look, go ahead and jump right into the tutorial to get started!

Tutorial

Overview & timestamps

Let’s have some fun creating this really sleek look for your Squarespace site’s gallery sections!

There is quite a bit of code involved yes, but I promise it’s all pretty straightforward and you’ll even be able to skip the parts you don’t want to include in your final design:

00:00 - Intro
01:14 - Overview of the Masonry Gallery settings
As with previous customizations, we’ll begin by taking a quick look at the setup required to make it happen. Briefly, you’ll need to check that you’re working with the Grid: Masonry layout and that the captions are enabled. Additionally, if you like the multiline description look, you’ll need to create your headings/paragraphs as well.
02:31 - Setting and styling the caption as an overlay on top of the thumbnail
Next, we’ll focus on moving the caption from underneath the thumbnail to on top of the thumbnail. We’ll style the container holding the text to make sure that it’s fully readable without taking away from the image behind it, while ensuring the thumbnail remains clickable even with the content overlapping it.
09:02 - Adding the line detail to the caption overlay
After we’re done with the repositioning, we’ll create the little line detail that you’ll be able to adjust to your liking depending on the look that you’re going for! We’ll need to use a pseudo-element to achieve this, so you’ll have lots of flexibility in terms of styling.
11:08 - Creating the hover mode border effect
To create the hover mode, we’ll be using the outline property instead of the border one, in order to achieve the animation we’re going for where the line goes from transparent to opaque while expanding out of the image like a small ripple effect.
14:59 - Modifying the mobile version
And of course, last but not least, we’ll deal with the mobile layout. We’ll keep things simple here and stack the content under the image while reducing the offset of the outline to avoid weird overlaps and underlaps.

And just like that you’ll be able to create a completely custom look for your client’s Grid: Masonry Gallery Sections in 7.1!

Hope you enjoyed this one.

Until next time,

Full code

/*SLEEK MASONRY GALLERY SECTION DESIGN IN 7.1 WITH CAPTION OVERLAY AND HOVER MODE*/
.gallery-caption-grid-masonry h4 {
  margin-bottom: 0;
}

//To style the overlay
.gallery-caption-grid-masonry {
  background: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.6) 50%);
  box-sizing: border-box;
  max-width: 100%;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

//To style the line
.gallery-caption-grid-masonry::before {
  background-color: #152944;
  content: '';
  display: block;
  height: 2px;
  width: 10%;
}

//To create the hover mode
.gallery-masonry-item {
  outline: 1px solid transparent;
  transition: all .5s;
}
.gallery-masonry-item:hover {
  outline-color: #152944;
  outline-offset: 10px;
}

//Mobile styles
@media screen and (max-width: 960px) {
  .gallery-caption-grid-masonry {
    background: white;
    position: relative;
  }
  .gallery-masonry-item:hover {
    outline-offset: 0;
  }
}

Gallery index/sectionTutorial