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 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.

// 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%);


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.