A monochrome to colour hover effect

On a Brine Index page, you can add Gallery pages and display these in various styles. Here’s some CSS that will display all the Gallery images in black-and-white until a visitor hovers over them. When hovered, the image will return to colour, with a short animation effect:

/* Galleries fade from b&w to colour on homepage */
/* You may use freely on Squarespace but do not publish */
/* Copyright 2019 Soundfocus Digital [www.sf.digital] */
.tweak-index-gallery-hover-style-fade .Index-gallery-item-image img {
     -webkit-filter: none;
     -moz-filter: none;
     filter: grayscale(100%);
     -webkit-transition: all 1s ease;
     transition: all 1s ease;
   }
   .tweak-index-gallery-hover-style-fade .Index-gallery-item-image img:hover {
     -webkit-filter: grayscale(0%);
     -moz-filter: grayscale(0%);
     filter: grayscale(0%);
     filter: none;
   }