JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <img src="http://i49.tinypic.com/2hcj5ax.jpg" alt="" class="img img1">
  <img src="http://i43.tinypic.com/28ivvi0.jpg" alt="" class="img img2">
</div>

CSS

.container{
  position: relative;
}

.img{
  position: absolute;
  width: 200px;
  height: 200px;
  transition: op 0.5s;
}

.img2{
  opacity: 0;
}

.img1{
  opacity: 1;
}

.container:hover .img2{
  opacity: 0.8;
}