JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="group1">
         <img class="a" src="http://imgur.com/Y7Cz2Q3.jpg">
         <img class="b" src="http://imgur.com/MMZwSdO.jpg">             
    </div>
    <div class="group2">
         <img class="c" src="http://imgur.com/HHbpx0w.jpg">
         <img class="d" src="http://imgur.com/Q9LfCwH.jpg">     
    </div>
</div>

CSS

.b, .d {
	opacity:0;
    transition: .3s;
	}
img {display: block;}	
.wrapper > div {display: inline-block;}

	.group1:hover .b {
	opacity:1;
	}
	
	.group2:hover img.d {
	opacity:1;
	}