<div style="text-align:center">
<img src="http://fivera.net/wp-content/uploads/2013/08/light-blue.png" alt="fivera.net" width="200" height="200">
img {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
img:hover {
-webkit-filter: grayscale(100%);
}
http://fivera.net/simple-image-crossfade-using-css3-transitions-live-example
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.