Here is a CSS code snippet to help you transition an image to Black and White on mouse hover.

Demo

See the Pen PzLkEr by Jonathan klughertz (@klugjo) on CodePen.

Code

Here is the full code

1
2
3
4
5
6
7
8
9
10
img {
transition: filter .5s ease-in-out;
-webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
filter: grayscale(0%); /* FF 35+ */
}
img:hover {
-webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
filter: grayscale(100%); /* FF 35+ */
}


  • The Black and White effect is achieved with the grayscale value for the filter property. grayscale(100%) corresponds to Black and White and grayscale(0%) corresponds to full colors.
    The -webkit-filter prefix is necessary for that property.


  • The smooth animation is achieved with the transition property.