Squarespace Gallery Section Hover Effects // Gallery Image Hover Effects

Squarespace offers a cool feature called "gallery sections" to showcase multiple pictures inside a section on your site, and thanks to some creative CSS, we can add unique hover effects to those images!
In this tutorial you’ll learn how to add a hover effect using image filters. For a list of image filters, check out this article on my blog: insidethesquar...
Important Info: This tutorial is for Squarespace version 7.1 and wont work for older versions of Squarespace. Visit insidethesquar... to learn more.
Here are the gallery section selector classes by type:
*Grid: simple*
.gallery-grid-item img
*Grid: strips*
.gallery-strips-item img
*Grid: masonry*
.gallery-masonry-item img
*Slideshow: simple*
.gallery-slideshow-item img
*Slideshow: full*
.gallery-fullscreen-slideshow-item img
*Slideshow: reel*
.gallery-reel-item img
Here is the main code from the tutorial:
.gallery-grid-item img{
filter:grayscale (1) blur (2px);
transition: filter 1s
}
.gallery-grid-item img:hover{
filter: grayscale (0)
}
For more creative codes like these, get my Squarespace code collection at insidethesquare...
Related Content:
📝 Original blog post → insidethesquar...
🌠 Image filter article → insidethesquar...
❤️ Support my channel → buymeacoffee.c...
📖 Learn CSS for FREE → insidethesquar...
1️⃣ Apply this code to a single section → insidethesquar...
📑 My Squarespace code collection → insidethesquar...
🙋‍♀️ Have a question? Check out my code troubleshooting tips → insidethesquar...
- - -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥ #SquarespaceTutorial #CustomCode #WebsiteDesign #SquarespaceTips #WebDevelopment #VideoCollection #CreativeDesign #OnlinePresence #Squarespace7.1 #WebDesignInspo #DIYWebsite #TutorialTuesday #ContentCreation

[@alejandropargaa]

is there a way for my thumbnails for my pages to more on repeat? Like a preview of the video before entering the page?

[@AlyssaWallace-r9y]

Is there a way to do this for portfolio thumbnails?

[@InsideTheSquare]

Great question, and yes! Here is a tutorial video with more info: ua-cam.com/video/SSIA7pUodt0/v-deo.html

[@revision4992]

you sweet, sweet angel - thank you

[@InsideTheSquare]

You're welcome 🥰

[@andrewmatthews8498]

These videos are so useful! Really helping me get the grasp of CSS for my works website. However, some of these things don't work when there are site wide animations on (we have the fade on and we aren't allowed to turn them off) is there any way around this?

[@InsideTheSquare]

Unfortunately there isn't; when you select a site wide animation, it gets added to a layer of code that we can't overwrite with simple CSS.

[@rebeccafonseca9187]

So kind :) Thank you!

[@InsideTheSquare]

You are so welcome! 🤗

[@RedPoppyArtHouse]

This is great, thanks. Do you know if swapping the image is possible? Happy to hire if available.

[@InsideTheSquare]

This tutorial can help: insidethesquare.co/squarespace-tutorials/second-image-on-hover

[@RedPoppyArtHouse]

@@InsideTheSquare Wow, thank you. Do you happen to know if this is possible on Gallery Grid Sections? ...I found nth child code that works for it but interferes with my filter (category) code -ha always tradeoffs I guess. Thx again, much appreciated!

[@lallenwork]

Hi, this is awesome thank you - was wondering how I can keep this contained to one single page rather than have it effect all the galleries on my entire website? Thanks!

[@InsideTheSquare]

Great question! You can isolate an individual part of your site by using its block id, or in your case, data section id. Here is an article & tutorial video with more info: insidethesquare.co/resources/squarespace-css-targeting-tips

[@lallenwork]

@@InsideTheSquare Thank you for this, much appreciated!

[@DanDill]

Thank you!

[@InsideTheSquare]

You're welcome! :)