Brine: How can I make Gallery images monochrome and then colour when hovered?

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 bw to colour on homepage.
.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;
   }