How to create image filter hover effects in Squarespace
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!
Let’s talk filters!
Here are examples of the six image filters that you can create with code: