Adding a hover effect to summary and gallery blocks in Squarespace

If you saw the previous tutorial on how to create a simple overlay for your Summary Block thumbnail and liked it… you’re going to love this one even more! (Or the same, who knows)

Today we’re going to break down a FANTASTIC way to wow your visitors and your clients by adding a “lifting” effect to the items in your Summary Block and Gallery Block.

So let’s cut right down to the chase and get started!

How to add a hover effect to your Summary Block

I’m starting out with a Grid Summary Block inside an index section (Brine template) that I called #scale-up.

1. Starting off with a grid summary block.png

With our block in place let’s take a look at what each combo thumbnail + excerpt is called, since we’re going to be adding that levitating effect to the container holding them as a whole.

2. Selecting a slide in the summary block.png

If we take a look inside our Inspect Element window…

3. Close up.png

We can see each slide/item/combo has a bunch of classes.

I’m going to be using the first one called .summary-item.

Next, even when we’ll be targeting the index section to specify which block we’re looking to customize, I also want to use the block’s class to make sure that if I decide to add another type of Summary Block inside that section, it won’t get altered.

Scrolling up a bit to check the name of the container holding all our items, we can see the parent container has a class of .sqs-gallery-design-autogrid, so let’s go with that too.

So now we can target the items (.summary-item) inside our Grid Summary Block (.sqs-gallery-design-autogrid) inside our index section (#scale-up):

#scale-up .sqs-gallery-design-autogrid .summary-item {

}
5. Targeting summary block in CSS.png

Oki doki!

To make it easier for ourselves, and be able to see what we’re doing, we’re going to add the styles we want to showcase on hover under this “normal mode“ selector, and then we’ll set the :hover pseudo-class.

This lifting or levitating effect is quite simple, we only need to set two things: a shadow and a new position.

Let’s start by creating the shadow with box-shadow. I’ll be setting mine to be just sliiiiiiightly offset horizontally, pushed downwards a bit more prominently, with a significant blur, and with a barely visible black color:

#scale-up .sqs-gallery-design-autogrid .summary-item {
  box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.1);
}
6. Adding a shadow to thumbnails in summary block Squarespace.png

Good, now let’s make the items go up a couple of pixels through the transform property set for the vertical (Y) axis.

#scale-up .sqs-gallery-design-autogrid .summary-item {
  box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-10px);
}
7. Moving summary block slides.png

We can’t spot the difference in position right now because we’re giving it to all the items in “normal mode“.

However, since we now have both things set, we can use our pseudo-class :hover to make things interesting!

#scale-up .sqs-gallery-design-autogrid .summary-item:hover {
  box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-10px);
}
Blunt hover mode summary block.gif

Alright! Let’s finish this by making that effect a lot smoother using the transition property to shift through the changes.

We’ll be applying this to the “normal state“ of our items:

#scale-up .sqs-gallery-design-autogrid .summary-item {
  transition: box-shadow .5s, transform .5s;
}
Smooth hover mode for summary blocks.gif

There we go!

Subtle but sooo much nicer.

How to add a hover effect to your Gallery Block

We’re going to be recreating this same hover effect for our Grid Gallery Block!

I added mine inside the same index section and incorporated a title for each slide/item.

10. Starting off with a gallery block.png

Now, let’s take a look which container we’ll be targeting to add the effect.

11. Selecting the slide.png
12. Close up of the class.png

Alright, in our Inspect Element window above we can see these items have a class of .sqs-gallery-design-grid-slide we could use.

And scrolling up a bit further up…

13. Close up of the container.png

We find that the parent container has a class of .sqs-gallery-design-grid that can help us target this gallery grid-style block.

So this is what we’ll be working with:

#scale-up .sqs-gallery-design-grid .sqs-gallery-design-grid-slide {

}
14. Building the selector.png

Let’s add the shadow!

#scale-up .sqs-gallery-design-grid .sqs-gallery-design-grid-slide {
  box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.1);
}
15. Adding the shadow.png

Ok, we have a problem.

As you may notice, the shadow is pretty much only showing a bit on the left side of the slides near the title and the rest is getting cropped.

We’ll need to go back and change the container we’re targeting.

16. Looking for another container.png
17. Close up of new target.png

This one called .margin-wrapper is still holding our title + image combo and since its smaller and inside our previous one, we should have no issues displaying the shadow.

#scale-up .sqs-gallery-design-grid .margin-wrapper {
  
}

Let’s test it out

#scale-up .sqs-gallery-design-grid .margin-wrapper {
  box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.1);
}
18. Preview of new container selected.png

Perfect!

We can now set the position modification:

#scale-up .sqs-gallery-design-grid .margin-wrapper {
  box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-10px);
}
19. Moving upwards.png

And now, let’s add these styles under the hover mode.

#scale-up .sqs-gallery-design-grid .margin-wrapper:hover {
  box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-10px);
}

And set the transition property to the regular mode as well since we already know we need it to make things move nice and smooth.

#scale-up .sqs-gallery-design-grid .margin-wrapper {
  transition: box-shadow .5s, transform .5s;
}
21. Creating a smooth hover mode.png

Last but not least, I want to take this one step further in terms of customization and give the title of these gallery block items a background so they stand out more. Just because.

Since I want it to be seen at all times, I’ll add the color inside the “normal mode“ snippet.

#scale-up .sqs-gallery-design-grid .margin-wrapper {
  transition: box-shadow .5s, transform .5s;
  background: black;
  color: white;
}
22. Styling the title of gallery blocks in Squarespace.png

Love it!

Now, here’s what it looks like when I hover over the second thumbnail…

23. Testing hover mode.png

Does that look odd to you?

It seems like the thumbnails are getting cut at the top.

Let’s take a look real quick to see which parent or ancestor container is doing that.

24. Looking for big container.png

Ok, so we found the culprit.

In the screenshot above we can see that one of the parent containers is right at the edge of the items or slides, which doesn’t immediately make it a problem, but if we look closer…

25. Zoom into problematic property.png

…we can see it has been given the overflow property set to hidden, thus hiding anything that wants to well… overflow it.

But no worries because with a swift line of code, targeting that container through one of the classes (in this case I’ll use .sqs-gallery-block-grid) we can solve our problem!

#scale-up .sqs-gallery-block-grid {
  overflow: visible;
}
26. Overwritting value.png

Let’s take a look!

27. Final result of hover mode for gallery block thumbnails.png
Soomth hover for gallery block thumbnails.gif

Beautiful!!

So, there you go! That’s how you can add a super simple yet lovely levitating effect as hover mode to your Summary Blocks and Gallery Blocks in Squarespace!

Until next time,

B.

 

Full code

/*HOVER MODE FOR SUMMARY BLOCKS*/
#scale-up .sqs-gallery-design-autogrid .summary-item {
  transition: box-shadow .5s, transform .5s;
}
#scale-up .sqs-gallery-design-autogrid .summary-item:hover {
  box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-10px);
}
/*HOVER MODE FOR GALLERY BLOCKS*/
#scale-up .sqs-gallery-design-grid .margin-wrapper {
  transition: box-shadow .5s, transform .5s;
  background: black;
  color: white;
}
#scale-up .sqs-gallery-design-grid .margin-wrapper:hover {
  box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-10px);
}
#scale-up .sqs-gallery-block-grid {
  overflow: visible;
}