How to add or remove an Image Filter on Hover on Squarespace
Want to add a touch of interactivity and polish to your Squarespace site? One simple yet powerful way is by applying (or removing) an image filter on hover.
Whether you’re going for a bold pop of colour or a clean, filter-free look when hovered, this effect engages visitors and creates a more modern, responsive design experience.
In this tutorial, you'll learn how to easily add or remove an image filter on hover in Squarespace 7.1 using just a few lines of CSS. It’s perfect for emphasizing images, showcasing featured content, or building a dynamic and branded site experience.
Table of Contents
Why Use Image Filters on Hover?
Here are a few key benefits:
Strengthen Visual Branding: Filters can align images with your brand palette and mood.
Add Interactivity: Hover effects encourage user engagement and exploration.
Draw Attention: Highlight key visuals by changing their appearance on hover.
Modern Aesthetic: Subtle animations and visual shifts keep your design looking fresh.
Complexity: Easy
Step-by-Step Instructions
Step 1: 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 the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code. This code will work site wide
Step 2: If you wish to add or remove an Image Filter on Hover on a particular page, you will need to view the page source. Simply right mouse click and click on the 'View page Source' option. Look for the body tag which will 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 the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code.
Key Takeaways
Works on Squarespace 7.1.
Adds modern hover effects without additional plugins.
Supports both site-wide and page-specific targeting.
Great for portfolios, product galleries, or any image-based section.
FAQs
Can I use a different filter instead of grayscale?
Yes! You can use other CSS filters like blur(), brightness(), contrast(), or even combine them. Example:
filter: brightness(80%) contrast(120%);Can I apply the hover effect to only one specific image block?
Yes. Use the block ID (e.g., #block-yui_3_17_2_1_1714576123456_12345) to target a specific image.
Will this impact page speed or performance?
No. CSS hover effects are lightweight and won’t significantly affect loading times.
Is this mobile-friendly?
Yes, though hover effects are less prominent on touch devices. The image will remain filtered unless tapped or interacted with.
Conclusion
Adding or removing image filters on hover is a simple but impactful way to elevate your Squarespace site's visual storytelling. With just a few lines of CSS, you can transform static visuals into engaging content that stands out.
Whether you’re enhancing a portfolio, showcasing product shots, or refining a blog layout, hover filters help create a sleek, branded, and interactive user experience — all without touching any HTML or JavaScript.
Explore more subtle design upgrades like this to make your site feel polished and professional.
