JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<img class="gray-on-hover-tom" width="150px" src="https://img.icons8.com/plasticine/2x/car.png">

<img class="gray-on-hover-suzanne" width="150px" src="https://img.icons8.com/plasticine/2x/car.png">


<div class="text-meet-tom-paul">Stuff shown on hover for Tom & Paul</div>
<div class="text-meet-suzanne">Stuff shown on hover for Suzanne</div>

CSS

.gray-on-hover-tom:hover + div,
.gray-on-hover-suzanne:hover + div {
    display: block;
}



.text-meet-tom-paul, 
.text-meet-suzanne {
display:none;
}



.gray-on-hover-tom, .gray-on-hover-suzanne {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
transition: filter .4s ease-in-out;
}

.gray-on-hover-tom:hover, .gray-on-hover-suzanne:hover {
transition: filter .4s ease-in-out;
-webkit-filter: grayscale(0%); 
filter: grayscale(0%);
}