#CSS #Image

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

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](https://developer.mozilla.org/en/docs/Web/CSS/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](http://shouldiprefix.com/#filters).
- The smooth animation is achieved with the [transition](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) property.
#CSS #Image