How to Add a Hover Effect to Image Galleries on Squarespace 7.1

Having a modern website is almost non-negotiable for a photographer these days. While many great options are available to achieve this at any skill level, Squarespace has long been my number one recommendation for easily getting up and running with a clean, modern website. I’m a professional software engineer, and I still choose the ease of Squarespace for hosting this site!

Despite all the praise I can give the Squarespace platform, trying to achieve something outside of what the page editors allow you to do can often be a bit frustrating. Among the biggest annoyances for me is that the gallery blocks in Squarespace 7.1 do not offer a way to easily add hover effects to the images in the gallery. Luckily, we can achieve this pretty quickly with some custom CSS!

Note: For an example of what I’m talking about here, navigate to my portfolio and hover your mouse over an image. You’ll notice that the image scales slightly when you hover on it. This post will show you exactly how I achieved that.

How do I find the version of Squarespace my site is using?

You’ll notice that this tutorial is directly targeted at the latest version of Squarespace, which is version 7.1. It’s extremely easy to determine which version of Squarespace your site uses. To start, go to the Website configuration from your site’s administrative page.

From there, simply scroll down to the bottom of that menu and you’ll see your current Squarespace version.

How to add the hover effect to images in the gallery

Once you’ve confirmed that you’re on the correct version of Squarespace for this tutorial, you’re ready to add the custom CSS to achieve our desired effect. First of all, choose the Website Tools option from the Website menu you used to check your current Squarespace version.

From here, you can choose the Custom CSS option, which will open up a panel where you can enter your custom CSS rules that will apply to your entire website.

Finally, we can add our necessary rules to enable our hover effect. Now you can simply copy and paste the following into your custom CSS:

.gallery-strips-wrapper img {
  transition: 0.3s !important;
  
  &:hover {
    transition: 0.3s !important;
    transform: scale(1.05);
  }
}

Simply hit save and you’ll now have a subtle, but nice hover effect for your galleries!

Interested in more?

This is the first post I’ve done that focuses more on the business side of photography. I’ve been considering sprinkling these sorts of posts in with my usual content. So, would you be interested in future posts related to the business of photography? If so, are there any specific topics you’d be interested in?

If so, be sure to let me know in the comment below!