Creating a simple overlay for your summary blocks

Want to see and learn how to do a reaaaaaally cool Squarespace customization?

Then you’re in the right place my friend because today we’ll be going through how you can create or add a nice overlay to your summary block thumbnails!

We’ll be adding some text with a semi transparent background to our thumbnails so they pop up on hover and wow your visitors and clients.

Ready for this? Let’s go!

Adding an overlay to summary block thumbnails

K, so first thing’s first, we need a summary block.

I’m going to be working with a Carousel Summary Block, but feel free to use any other layout you like, just keep in mind you will need to change up the selectors in the code to match your block type.

1. Using Squarespace summary block.png

Since we want to add the overlay to our thumbnail, we need to find out what that container is called so we can target it.

2. Selecting thumbnail container.png

Here I can see it has a bunch of classes. I’m going to go with summary-thumbnail-container.

Then, I also want to make sure I’m targeting the thumbnails for my type of summary block, so I’ll scroll up a bit in my Inspect Element window and see which container and class I can use to do that.

3. Targeting summary block style.png

Ok, so we don’t have to go to far. The container for the slide has a class of sqs-gallery-design-carousel-slide that we can use since it seems to be explicitly for the carousel block.

With these two names, our selector looks like this:

.sqs-gallery-design-carousel-slide .summary-thumbnail-container {
  
}

However, since we’re going to be adding the overlay as something EXTRA, we need to create a pseudo element that sits in front of our thumbnail. Therefore, we’ll use ::after

.sqs-gallery-design-carousel-slide .summary-thumbnail-container::after {
  
}
4. Creating pseudo element for summary block.png

Good! Now, let’s start creating our overlay shall we?

As always with any pseudo element, we need to add the content property to determine what extra stuff we’ll be adding.

I want to add some text to invite people to click through:

.sqs-gallery-design-carousel-slide .summary-thumbnail-container::after {
  content: '– Read More –';
}
5. Adding overlay text on summary block.png

You may notice we now have a bit more spacing between the thumbnail and the excerpt content, however we’re not seeing the text yet so I’ll be increasing its font size to see if that’s the problem.

.sqs-gallery-design-carousel-slide .summary-thumbnail-container::after {
  content: '– Read More –';
  font-size: 20px;
}
6. Adding overlay text on summary block in Squarespace.png

Great! We can see it now.

Ok, time to reposition this baby. Since I want it to be over the image and not leave any extra space under the image, I’m going to set it to position absolute.

.sqs-gallery-design-carousel-slide .summary-thumbnail-container::after {
  content: '– Read More –';
  font-size: 20px;
  position: absolute;
}
7. Adding text over summary block thumbnail.png

And now, I’ll be setting the top and left offset to start moving it.

.sqs-gallery-design-carousel-slide .summary-thumbnail-container::after {
  content: '– Read More –';
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 0;
}
8. Positioning overlay text.png

Now let’s add a random background color to see it better and keep adjusting its placement.

.sqs-gallery-design-carousel-slide .summary-thumbnail-container::after {
  content: '– Read More –';
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
}
9. Adding background to overlay text.png

We’ll make it expand the entire width of the thumbnail by making it 100% in width.

.sqs-gallery-design-carousel-slide .summary-thumbnail-container::after {
  content: '– Read More –';
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  width: 100%;
}
10. Expanding background.png

Ok, now let’s make it fill everything by setting the height as well to 100%.

.sqs-gallery-design-carousel-slide .summary-thumbnail-container::after {
  content: '– Read More –';
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  width: 100%;
  height: 100%;
}
11. Adding height to overlay.png

Alright, we’re getting there!

There are a couple of ways we can center the text now, but the easiest and quickest way to do it is through our forever handy friend: flexbox.

We’re going to be setting our pseudo-element to flex and then using two of the flexbox properties to center it.

The first one will be align-items and in this case its going to help us move it to the center, vertically.

.sqs-gallery-design-carousel-slide .summary-thumbnail-container::after {
  content: '– Read More –';
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
12. Centering overlay text.png

Then, we’re going to use justify-content to align it horizontally to the center.

.sqs-gallery-design-carousel-slide .summary-thumbnail-container::after {
  content: '– Read More –';
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
13. Centering overlay text.png


Perfect!!



Checking overlay for summary blocks on mobile screens

This part is optional, however I wanted to include it here in case:

  1. You want to have the overlay show up at all times and then disappear on hover,

  2. Or just to make sure that if people tap on hold over any of these thumbnails on mobile devices – to bring up the hover mode – the overlay still looks good.


If we check what this looks like on tablets…

14. Overlay on tablet.png

It’s ok, but the text is a bit too close to the edges, so I want to add some padding to that.

.sqs-gallery-design-carousel-slide .summary-thumbnail-container::after {
  content: '– Read More –';
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}
15. Adding padding.png

The text seems to be about to overflow the thumbnail now, so we’ll fix that by making sure box-sizing is set to border-box, to contain the overlay inside the thumbnail.

.sqs-gallery-design-carousel-slide .summary-thumbnail-container::after {
  content: '– Read More –';
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  box-sizing: border-box;
}
16. Restricting content inside container.png

Alright, now let’s align the text to the center.

.sqs-gallery-design-carousel-slide .summary-thumbnail-container::after {
  content: '– Read More –';
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  box-sizing: border-box;
  text-align: center;
}
17. Aligning text to center.png

Now I don’t know about you but I don’t like the way the lines look right now like that so I’ll increase the padding to make them stack along with the words.

.sqs-gallery-design-carousel-slide .summary-thumbnail-container::after {
  content: '– Read More –';
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 52px;
  box-sizing: border-box;
  text-align: center;
}
18. Increasing padding.png

Much better! Let’s check phone screens too…

19. Result in phone.png

Perfect! Now we can continue.

Adding an overlay on hover to summary block thumbnails

We’re almost done with our overlay!

We just need to fix the color – unless you like that bright red – and set it to appear only on mouseover.

I’ll be switching the red for a white rgba that’s aaaaaalmost completely opaque.

.sqs-gallery-design-carousel-slide .summary-thumbnail-container::after {
  content: '– Read More –';
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 52px;
  box-sizing: border-box;
  text-align: center;
}
20. Creating a transparent overlay on summary blocks.png

And to make it appear on hover, I’m going to set the normal mode’s opacity to 0…

.sqs-gallery-design-carousel-slide .summary-thumbnail-container::after {
  content: '– Read More –';
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 52px;
  box-sizing: border-box;
  text-align: center;
  opacity: 0;
}
21. Adding an overlay on hover to summary block.png

…and now setting the hover mode.

Keep in mind that depending on when you want the hover to appear (e.g. when hovering over the image itself, when hovering over the excerpt or at any point when the mouse enters the entire slide) you may need to target the :hover mode of a different selector.

The way I’m doing it here, I’m telling my browser that at any point when the mouse enters the SLIDE, the overlay will appear.

.sqs-gallery-design-carousel-slide:hover .summary-thumbnail-container::after {

}

So I’m going to be setting my pseudo-element’s opacity to 1 here:

.sqs-gallery-design-carousel-slide:hover .summary-thumbnail-container::after {
  opacity: 1;
}
Blunt hover mode.gif

Alright, this is AWESOME!

Buuuuut…. I feel the hover mode just pops in and out way too harshly.

To make this smoother there’s one last property we can add: transition.

This one will go into our original snippet and I’ll be setting it so the opacity property value takes 1s to change.

.sqs-gallery-design-carousel-slide .summary-thumbnail-container::after {
  content: '– Read More –';
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 52px;
  box-sizing: border-box;
  text-align: center;
  opacity: 0;
  transition: opacity 1s;
}
Smooth hover mode.gif

Gaaaah! Beautiful!!

Congratulations my friend, you just added a sweet overlay to your Squarespace Summary Block thumbnails.

Until next time,

B.

 

Full code

.sqs-gallery-design-carousel-slide .summary-thumbnail-container::after {
  content: '– Read More –';
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 52px;
  box-sizing: border-box;
  text-align: center;
  opacity: 0;
  transition: opacity 1s;
}
.sqs-gallery-design-carousel-slide:hover .summary-thumbnail-container::after {
  opacity: 1;
}