JSFiddle - React, Tailwind, and code Playground

HTML

<div id="demo">
<section class="grayscale"> 
    <h2>Оттенки серого</h2><br>     
    <img width="103" height="79" src="http://otvet.mail.ru/img/promo/beeline/logo_beeline_foot.png"> 
</section>
</div>

CSS

.grayscale img {     
    filter: grayscale(1);     
    -webkit-filter: grayscale(1);     
    -moz-filter: grayscale(1);     
    -o-filter: grayscale(1);     
    -ms-filter: grayscale(1); 
} 
.grayscale img:hover {     
    filter: grayscale(0);     
    -webkit-filter: grayscale(0);     
    -moz-filter: grayscale(0);     
    -o-filter: grayscale(0);     
    -ms-filter: grayscale(0); 
}

img{
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
img:hover{
    -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -o-transform: scale(1.1);
      transform: scale(1.1);
}
#demo {
    width:300px;
    margin:100px auto;
}
h2 {text-transform:uppercase;}