【CSS】スタイルシートだけで画像をモノクロにする方法

画像にマウスカーソルを合わせた際にモノクロとフルカラーを切り替えたいとき。
以前はモノクロとフルカラーの２種類の画像を用意しておく必要がありましたが、最新のCSS3では１つの画像だけで、スタイルシートに簡単なコードを記述するだけで事足ります。

まずは下準備。
ここでは仮に、グレイスケールを施したい画像に「class="gray"」というクラス名を付与しておきましょう。

<img src="/sample.png" width="300" height="200" alt="sample" class="gray">

続いてスタイルシートの記述方法です。具体的には『filter』プロパティを使うことになります。

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

マウスオーバーしたときにモノクロからフルカラーに戻すには次のコードを使います。

img.gray:hover {
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);
filter: grayscale(0);
}

これは超便利。必ず覚えておきましょう！