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