Crossbrowser grey scale

CSS3, SVG and propriatory IE filters

by lovromar

HTML

<img src="http://baconmockup.com/200/200" class="greyScaleHover" />
<img src="http://baconmockup.com/201/200" class="greyScaleHover" />
<img src="http://baconmockup.com/202/200" class="greyScaleHover" />
<img src="http://baconmockup.com/203/200" class="greyScaleHover" />

CSS

.greyScaleHover {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-backface-visibility: hidden;
}
.greyScaleHover:hover {
    -webkit-filter: grayscale(1);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'1278\'><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");
    filter: grayscale(100%);
    filter: gray;
}
/*POSITIONING*/
 img {
    float:left;
}
img:nth-child(odd) {
    clear:left;
}