How to create image filter hover effects in Squarespace

Apr 27

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

In this tutorial I am going to show you how to use custom CSS to apply an image filter specifically on a hover for your on page images.

We can use both specific code names to target image types, and block id's to target specific images!

There are 6 filters that work great with Squarespace, detailed below with examples featuring my fabulous friend Gus the Pineapple 🍍.

Here is an example of the hover effect code for a grayscale filter:

For all on page images, this code will do the trick:

.intrinsic:hover img {filter:grayscale(1)}

If you are trying to target a specific image with a block id, replace the word .intrinsic with the block id, like this:

#block-yui-123456789:hover img {filter:grayscale(1)}

Want to apply this code to a specific image type?

Here are some examples for 5 other on page image types:

.design-layout-card:hover img {filter:grayscale(1)}
.design-layout-overlap:hover img {filter:grayscale(1)}
.design-layout-collage:hover img {filter:grayscale(1)}
.design-layout-stack:hover img {filter:grayscale(1)}
.design-layout-poster:hover img {filter:grayscale(1)}

Here is a link to the chrome extension I use to easily find block ID’s in Squarespace. *Please note I am not affiliated with them in any way, I just use this extension in my own work!