
CSSだけで画像をグレースケール化する
2015年5月14日CSSテクニック
CSSのfilterを使って画像をグレースケール(モノクロ)化します。画像を2枚用意する必要がなく、ロールオーバー時に簡単に元のカラー画像に戻することもでき便利です。
HTML
<ul id="photo"> <li><a href="javascript:void(0);"><img src="img01.jpg" width="237" height="156" /></a></li> <li><a href="javascript:void(0);"><img src="img02.jpg" width="237" height="156" /></a></li> <li><a href="javascript:void(0);"><img src="img03.jpg" width="237" height="156" /></a></li> </ul>
CSS
#photo { text-align: center; } #photo li { display: inline-block; margin: 0 10px 10px; } #photo img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); transition: 0.2s linear; } #photo a:hover img { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -o-filter: grayscale(0%); -ms-filter: grayscale(0%); filter: grayscale(0%); }