Adding a hover effect to summary and gallery blocks in Squarespace (7.0, 7.1 CE & 7.1 FE)

• 00
• 01
• 02
• 99

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.

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.

If we take a look inside our Inspect Element window…

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 {

}

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);
}

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);
}

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);
}

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;
}

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.

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

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…

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 {

}

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);
}

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.

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);
}

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);
}

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;
}

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;
}

Love it!

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

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.

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…

…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;
}

Let’s take a look!

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;
}