JSFiddle - React, Tailwind, and code Playground

by Kheema Pandey

HTML

<ul class="gallery">
<li>
<img src="http://lorempixel.com/100/100" class="grey" />
<img src="http://lorempixel.com/100/100" class="color" />
</li>
    
<li>
<img src="http://lorempixel.com/100/100" class="grey" />
<img src="http://lorempixel.com/100/100" class="color" />
</li>
</ul>

CSS

.gallery li {
	float: left;
	margin-right: 20px;
	list-style-type: none;
	margin-bottom: 20px;
	display: block;
	height: 130px;
	width: 130px;
	position: relative;
}

img.grey {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}
 
img.color {
	position: absolute;
	left: 0; top: 0;
}

JavaScript

$("img.grey").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});