CSSだけで画像をモノクロにするテクニック【グレースケール】

ウェブサイトで使用する画像を視覚的に印象づける手法のひとつに、「画像を白黒（モノクロ）」にする方法があります。

特に、マウスを乗せたときだけカラー表示にしたいといった演出では、ユーザーの注意を引きやすくなります。
CSSの「filter」プロパティを使えば、JavaScriptなどを使わずに簡単にグレースケール効果（白黒）を適用できます。

グレードスケールにした画像を「hover」 でカラーにする

以下は、通常時は、オンマウスで、カラーになるような演出をするCSSの設定です。

通常は、カラーの画像で、オンマウス時（hover時）のみに適用する場合は下記のようにします。

逆の場合（オンマウス時にカラーにする場合）は下記のようにします。