どうも!chuckです。
今回はCSSだけで画像をグレーアウトさせる方法について書いていきます。
filterプロパティを使う
filterプロパティを使えばカンタンに画像をグレーアウトさせることができます。
DEMO1
この画像にカーソルを合わせると、
グレーアウトします。
http://chuck0523.github.io/front-end-coding/grayoutImage/index1.html
コード
DEMO2
また、ありがちな実装として、ECサイトで売り切れ商品のみグレーアウトしたいなんていう要望もあるかと思います。
そのときはグレーアウトしたい商品用にクラスを作ればOKです。
バナナにだけsoldoutというグレーアウト用のクラスをつけています。
http://chuck0523.github.io/front-end-coding/grayoutImage/index2.html
コード
まとめ的な
通常の画像とグレーアウトした画像の2種類を用意しなければいけないところを、CSSでグレーアウトを実現することにより、画像が少なく済みます。なかなか便利ですよね!
ぜひ、みなさんもつかってみてくださいヽ(=´▽`=)ノ
参考にしたサイト様