CSS: Black and White (Grayscale) image to Colour on Hover

If you want a nice transition when hovering on images, specifically for headshots (i.e. user profile thumbnails) then you can use CSS to turn your image in to a grayscale image, and then revert back to colour when hovered on.

img {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    transition: all 0.6s ease
}
img:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}