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

📩 Join the inner circle to get exclusive code updates

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;

}

}

3. Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

Want more?