カラーimg画像をモノクロに表示させておいてホバーでもとカラーに戻す

カラーimg画像をモノクロに表示させておいてオーバーでカラーに戻す
もともとフルカラーの画像にフィルターでモノクロに見せておいて、マウスホバーしたときに
カラーにもどすという表現を依頼され、cssで実現する方法を模索。

もともと、IEはfilterプロパティを使えばできるのですが、（※IE6は対応してないみたい。。。）
他のブラウザーが問題。
そこで、ベンダープレフィックスを使ってみたところ、Chromeは反応してくれました。
（※Safariでは5.2以上から対応らしい。ちなみにiOS Safariも未対応。でもとりあえず、今回は
PCサイトがターゲットなのでスマホは度外視しました。）

さて、問題はFirefox。
Firefoxたるものベンダープレフィックスつけても反応なし。。。。
さあ、どうしよう～。Firefox外しちゃう？それともjava script使っちゃう？
いやダメダメ!cssでなんとかしたい！だって、Firefoxだよ～!!（だからどうなの？汗;）
いろいろ調べたのですが、どうやらsvgで実現できそう！（※ただし、3.5以上）
使い方はsvgでフィルタをつくり、そのsvgをDataURIで書いてURLとして指定。
なんとも長いですが、これで実現。

★IE7以上

img{filter: gray;}
img:hover{filter: none;}

★Chrome

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

因みにChromeセピア色にしたいときはsepia()で指定できるみたい。
使い方は上記と同じで、()内に％で数字を指定。数字が大きくなるほどセピアになる。

☆Firefox☆

★Firefox img{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");}
img:hover{filter: none;}