Add or Remove Image Filters on Hover

What does this code do?

This code snippet will allow you to add or remove a filter when a visitor hovers over an image.

Code Snippets

Choose whether you want to add or remove the image filter on hover. Then copy and paste the appropriate code into Design > Custom CSS.

/* Remove Image Filter on Hover */
.sqs-block-image {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.sqs-block-image:hover {
  -webkit-filter: none !important;
  filter: none !important;
}

/* Add Image Filter on Hover */
.sqs-block-image {
  -webkit-filter: none;
  filter: none;
}

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

More Filter Options

blur(px)

brightness(%)

contrast(%)

hue-rotate(deg)

invert(%)

opacity(%)

saturate(%)

sepia(%) 

How To Use It

1. Copy and paste the code snippet as indicated above.

2. Choose the filter you would like to use. Make sure to use the unit indicated.

3. Customize the number to change the strength of the effect.