B&W To Color On Hover - Index Background

Look Demo

Make an index background black and white and colored when hovered. This plugin uses css editor and works with Squarespace 7.0 (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.

// BW To Color Index Page Image //

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

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

Customize

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.

License

This plugin comes with an Unlimited Use License. View License Terms