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!

Let’s talk filters!

Here are examples of the six image filters that you can create with code: