<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.