CSSで画像マウスオーバー（ホバー）時にモノクロ（グレイスケール）化する。

このサイトのトップでも現在利用していますが、マウスオーバー（ホバー）した時に写真がカラーからふわっとモノクロ（グレースケール）になるCSSです。0.5秒で変化するようにしています。

CSS

.toGray{
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
-ms-filter: grayscale(0%);
filter: grayscale(0%);
transition:0.5s;
transition:0.5s;
}

.toGray:hover{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}