How to add or remove an Image Filter on Hover on Squarespace
In this tutorial, you will learn how to effortlessly add or remove an image filter on hover for your Squarespace website. Image filters are an excellent tool for aligning your photos with your brand's theme and injecting a sense of dynamism into your website. By following the steps outlined in this tutorial, you'll be able to enhance the visual appeal of your Squarespace site by implementing captivating image filters that bring cohesiveness to your brand and add an element of visual interest to your photos.
Complexity: Easy
To add or remove an Image Filter on Hover, simply copy the code below:
Sets the add or remove an Image Filter on Hover Site Wide
// add or remove an Image Filter on Hover// .sqs-block-image { filter: grayscale(100%); filter: grayscale(100%);} .sqs-block-image:hover { filter: none !important; filter: none !important;}
From your Squarespace account, go to the Custom CSS Editor. paste the code into the Custom CSS editor box. This code will work site wide
If you wish to add or remove an Image Filter on Hover a particular page, you will need to view the page source by simply right mouse click and click on the 'View page Source' option. Look for the body tag which would look something like this: <body id=”collection-5f0748fced03a8025828eee7 (see image below).
Copy the ID (collection-5f0748fced03a8025828eee7).
// add or remove an Image Filter on Hover // #collection-5f0748fced03a8025828eee7{ .sqs-block-image { filter: grayscale(100%); filter: grayscale(100%);} .sqs-block-image:hover { filter: none !important; filter: none !important;} }
From your Squarespace account, go to the Custom CSS Editor. paste the code into the Custom CSS editor box.
