Thumbnail change on hover

Hi, I'd like to use CSS so that when you hover on one of the thumbnails on the homepage, it changes to a different image without colour

For example using the images attached:

I currently have the colour version on my homepage. How would I swap to the black and white version on hover?

Thanks

https://greyhound-keyboard-sa3k.squarespace.com

The best way to do this would be to have the black and whiteimages loaded to the site and a script to swap the color and grayscale versions. 

However, there's a rough and ready pure css way of doing it using filters. 

#projectThumbs a:hover img {
	filter: grayscale(1) brightness(6);
}

This effectively grayscales the image and then blows out the intermediate shades of gray using brightness. 

It's not perfect - fine detail is lost in some images.  However, I think that could be tweaked by creating custom brightness values for specific images.

As I say, the best way is to use scripting to image swap.