Color To B&W To On Hover - Index Background

Look Demo

Make an index background black and white when hovered. This plugin uses css editor and works with the Brine template family.

How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Color To BW Index Page Image //

.Index-page--has-image {
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);

.Index-page--has-image:hover {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);


You do not need to change any of the values or properties.

Please keep in mind that this code will not work if parallax is enabled in site styles.


No notes.