JSFiddle - React, Tailwind, and code Playground
HTML
<main>
<div class="image-container">
<div class="image-div">
<img class="image" src="http://image.lang-8.com/w50_h0/f9f18621119a77de2d9a263dc1ab61498d01d975.jpg" title="Андрей">
</div>
<div class="name">
<p>Андрей</p>
</div>
</div>
<div class="image-container">
<div class="image-div">
<img class="image" src="http://image.lang-8.com/w50_h0/f9f18621119a77de2d9a263dc1ab61498d01d975.jpg" title="Андрей">
</div>
<div class="name">
<p>Андрей</p>
</div>
</div>
<div class="image-container">
<div class="image-div">
<img class="image" src="http://image.lang-8.com/w50_h0/f9f18621119a77de2d9a263dc1ab61498d01d975.jpg" title="Андрей">
</div>
<div class="name">
<p>Андрей</p>
</div>
</div>
</main>
CSS
* {
box-sizing: border-box
}
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.image {
filter: grayscale(100%);
}
.active .image {
transform: scale(1.1);
filter: grayscale(0%);
}
main {
display: flex;
}
.image-container {
border: 1px dotted gray;
margin: 15px;
padding: 10px;
}
JavaScript
$('.image-container').click(function() {
$('.image-container').removeClass('active');
$(this).toggleClass('active');
})