How to create filter hover effects for image galleries in Squarespace 7
This tutorial is for the BRINE/BEDFORD theme of Squarespace, built with an older version. For more information, visit https://insidethesquare.co/themes
We are going to create a filter effect and combine it with a hover effect for an on-page image gallery.
The codes I am using in this video are custom CSS codes, and I will walk you through it step by super simple step in this video.
Be sure to watch the whole tutorial so you understand how to use these codes before you copy them from below!
Here are the codes:
Slideshow: grayscale on hover
.sqs-gallery-design-stacked-slide img:hover{filter:grayscale(100%)!important}
Slideshow: grayscale to full color on hover
.sqs-gallery-design-stacked-slide img{filter:grayscale(100%)!important} .sqs-gallery-design-stacked-slide img:hover{filter:grayscale(0%)!important}
Carousel: grayscale on hover
.sqs-gallery-design-strip-slide:hover{filter:grayscale(0%)!important}
Carousel: grayscale to full color on hover
.sqs-gallery-design-strip-slide:hover{filter:grayscale(0%)!important}
But wait.. there’s more!
Grayscale filters are great, but what about blur, or invert, or hue rotate? Check out my list of image filters at insidethesquare.co/image-filters