CSSだけで白黒画像にする

2017/09up

オレンジ
htmlはこちら。
class名はでdemoにしました。
<div class="demo">
	<img src="画像のURL" width="サイズ"/>
</div>

cssは
.demo img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: 0.2s linear;
}
.demo :hover img {
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    filter: grayscale(0%);
}

※パソコン限定ですが、ホバーでモノクロ画像に色が付くcssです。