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

[@wawaheads]

Hi Beca I tried the code, but nothing happend, can it be that I have more than 1 gallery in the website? thanks!

[@InsideTheSquare]

Yes you can! Can you share your code here? I'm happy to help you troubleshoot :)

[@rebeccafonseca9187]

So kind :) Thank you!

[@InsideTheSquare]

You are so welcome! 🤗

[@notthe1stnoelle]

This is fantastic, many thanks for the expertise you so willingly share! One question that I can't seem to find the answer to: why does the hover effect not work if I add a link to to the gallery image?

[@InsideTheSquare]

That's a great question! For this specific page section type, the link will become the top layer of the object, invisible to us, but preventing a hover interaction with the element. Hope that info helps! :)

[@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?

[@InsideTheSquare]

I don't think I understand your question 🫤 Technically you could use a gif instead of a static image for the preview, but I need some clarification: what do you mean by "more on repeat"?

[@alejandropargaa]

@@InsideTheSquare sorry about that typo! "move" on repeat is what i meant to write. Is there a tutorial on how to us a GIF as the thumnbnail? Or if there is another option to have the thumbnail to preview the video a little longer than a GIF

[@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!

[@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!

[@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: ruclips.net/video/SSIA7pUodt0/видео.html

[@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.

[@DanDill]

Thank you!

[@InsideTheSquare]

You're welcome! :)

[@revision4992]

you sweet, sweet angel - thank you

[@InsideTheSquare]

You're welcome 🥰