Add or Remove an Image Filter on Hover

Making sure your images and colours are consistent is a huge step towards giving your site a professional look. Image Filters are a great way to help your photos look on brand, especially if they were taken at different times, by different photographers, or if you are using stock photos.

They can also be a great way to add some effects to your website. In this video, I show you how to add or remove image filters when a visitor hovers overtop the image. All code used in the video is provided below.

The following code is used in the video.

.sqs-block-image {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
.sqs-block-image:hover {
  -webkit-filter: none !important; 
  filter: none !important;
}

More Filter Options

blur(px)

brightness(%)

contrast(%)

hue-rotate(deg)

invert(%)

opacity(%)

saturate(%)

sepia(%) 

Here are some other posts you may like:

• How to Add Text Beside a Gallery in Squarespace 7.1

• Place Two Items Beside Each Other in a Form

• Resize Images for Mobile in Squarespace 7.1