Grayscale hover effect on grid gallery section
In this article, you’ll learn how to create a grayscale hover effect in Squarespace on grid gallery sections - no fluff, just what you need to know. If you find the article useful, feel free to share it with the world using the social sharing icons on this page. Thank you!
1. Why use this code?
Gallery sections in Squarespace are great and they come with lots of native customisation features, but sometimes you just need to elevate the style of a site that little bit more. Enter, the grayscale hover effect. This effect makes all the images in your gallery section grayscale, and then transforms individual images into color when hovered over.
See the effect in action on one of my clients’ websites below
Want a framework for designing the perfect homepage?
2. The code
🚨 You’ll need to download the Squarespace Block Identifier chrome extension to target the correct section in the code below.
Paste where? Design > Custom CSS
// Gallery grayscale effect //
SECTION-ID {
.gallery-grid-item img {
filter: grayscale(100%);
transition: filter .2s ease-in-out;
}
.gallery-grid-item:hover img {
filter: none;
transition: filter .2s ease-in-out;
}
}
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
