How to create filter hover effects for image galleries in Squarespace 7.1

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

About This Tutorial

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

In this tutorial, I will show you how to create filter effects for gallery images in Squarespace 7.1 and how to use them for really cool looking hover effects.

This tutorial is specific for galleries, not on page images or products, those have different “code names” in CSS so I am covering them in different tutorials.

Now all of the effects we are creating today are done with a little custom CSS magic and I will walk you through it step by super simple step in this video.

The codes we are using are below, but be sure to watch the whole tutorial so you understand how to use them!

Squarespace Tutorial

Code Example

Here is the example code from the tutorial for a Grid:Simple gallery design style

.gallery-grid-item img{
filter:grayscale (1) blur(2px);
transition: filter 1s
}

.gallery-grid-item img:hover{
filter: grayscale (0)
}

Here is the list of gallery section design style selectors:

Grid: Simple

.gallery-grid-item img

Grid: Strips

.gallery-strips-item img

Grid: Masonry

.gallery-masonry-item img

Slideshow: Simple

.gallery-slideshow-item img

Slideshow: Full

.gallery-fullscreen-slideshow-item img

Slideshow: Reel

.gallery-reel-item img

---

---

Related Content

🌠 Image filter article → insidethesquare.co/image-filters

❤️ Support my blog → buymeacoffee.com/insidethesquare

📖 Learn CSS for FREE → insidethesquare.co/learn

1️⃣ Apply this code to a single section → insidethesquare.co/resources/squarespace-css-targeting-tips

📑 My Squarespace code collection → insidethesquare.co/css

🙋‍♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help