.grayscale {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,<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>#grayscale");

  /* IE 6-9 */
  filter: gray;

  /*
Chrome 19+,
Safari 6+,
Safari 6+ iOS,
Opera 15+
*/
  -webkit-filter: grayscale(100%);
}

.grayscale.fade {
  -webkit-transition: -webkit-filter .5s;
}

.grayscale.fade:hover {
  -webkit-filter: grayscale(0%);
}

.grayscale-replaced.fade svg {
  opacity: 1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease;-ms-transition: opacity .5s ease;-webkit-transition: opacity .5s ease;-moz-transition: opacity .5s ease;-o-transition: opacity .5s ease;
}

.grayscale-replaced.fade:hover svg {
  opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);
}