JSFiddle - React, Tailwind, and code Playground

HTML

<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>

CSS

.img1,
.img2, 
.img3 {
  border: 1px solid black;
  transition: 1s;
  position: absolute;
}

.img1 {
  left: 25%;
  height: 500px;
  width: 500px;
  z-index: 1;
  background-image: url(http://cdn.pcwallart.com/images/balloons-photography-vintage-wallpaper-1.jpg);
}

.img2,
.img3 {
  right: 25%;
  width: 500px;
  height: 500px;
  bottom: 0;
  background-image: url(https://i.pinimg.com/736x/c1/7b/15/c17b150e93c4e9c50d963b076484bee7--apple-wallpaper-iphone-wallpaper.jpg);
}

.img2 {
  z-index: 2;
  }
  .img3 {
  z-index: 0;
}

.img1:hover + .img2{
  opacity: 0;
}