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


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


Here is the full code

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.