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: insidethesquare.co/image-filters
Important Info: This tutorial is for Squarespace version 7.1 and wont work for older versions of Squarespace. Visit insidethesquare.co/themes 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.co/css
Related Content:
📝 Original blog post → insidethesquare.co/squarespac...
🌠 Image filter article → insidethesquare.co/image-filters
❤️ Support my channel → buymeacoffee.com/insidethesquare
📖 Learn CSS for FREE → insidethesquare.co/learn
1️⃣ Apply this code to a single section → insidethesquare.co/resources/...
📑 My Squarespace code collection → insidethesquare.co/css
🙋‍♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help
- - -
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