JSFiddle - React, Tailwind, and code Playground

by adonis11

HTML

<h1>Фильтры CSS3</h1>
	    <div id="img-wrap">
            <div class="holder">
               <img src="https://news.artnet.com/app/news-upload/2015/11/cate-blanchett-julian-rosefeldt-manifesto-hero-256x256.jpg" class="img-1">
            </div>
		    <div class="holder">
               <img src="https://static.eva.ro/img/auto_resized/db/article/079/163/802785l-640x0-w-bfab0093.jpg" class="img-1">
            </div>
            <div class="holder">
               <img src="https://pbs.twimg.com/profile_images/942135255020064768/0xzpYpuB_400x400.jpg" class="img-1">
            </div>
       </div>

CSS

/*filter*/
#img-wrap {
  width: 700px;
  padding: 10px;
  box-sizing: border-box;
  margin: 20px auto;
  overflow: hidden;
  background: #000;
}

.holder {
  width: 200px;
  height: 200px;
  margin: 8px;
  float: left;
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
}

.holder img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* black and white hover effect */
.holder .img-1 {
  filter: grayscale(1);
  transition: 0.5s ease-in-out;
}

.holder:hover .img-1 {
  filter: grayscale(0);
  transition: 0.5s ease-in-out;
}