CSSで画像を白黒（モノクロ)に変更する

画像を白黒（モノクロ）に変更する場合、CSSのフィルターでグレースケールをかける方法があります。

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

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