Grayscale filter using SVG+CSS

file.html

<img src="http://lorempixel.com/400/200/sports/" alt="" class="fader">

filter.svg

<svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
 </filter>
</svg>

style.css

img.fader {
  filter: url(filter.svg#grayscale); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
  -webkit-transition: all 2s;
}

img:hover {
  filter: none;
  -webkit-filter: grayscale(0);
}