Из черно-белой в цветную

by pharma_nsk

HTML

<body>
<img src="http://ladyspecial.ru/images/2012/12/18/pre_00adcca0c545d92251847efc49df1d6a.jpg" class="grayscale">
<img src="http://image.subscribe.ru/list/digest/style/im_20120531162812_25255.jpg" class="grayscale">
<img src="https://icdn.lenta.ru/images/2020/02/10/09/20200210094453533/square_320_bc44c0fa6d07757c0a8127b6bc9743ed.jpg" class="grayscale">
<img src="https://flor2u.ru/images/uploads/conversion/f8b/f8b2616a33b0fa2327466d6f6f0c97b4/f8b2616a33b0fa2327466d6f6f0c97b4-flor.detail.gallery.jpg" class="grayscale">
</body>

CSS

img {display:inline-block;
width: 300px;}
.grayscale {
-webkit-filter: grayscale(1);
filter: grayscale(1);
transition: 0.3s;
}
.grayscale:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}