JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product1">
    <img class="active" src="http://lorempixel.com/400/200/sports" alt="">
    <img class="inactive" src="http://lorempixel.com/400/200/" alt="">
</div>

CSS

body{
    background: red;
}
.product1{
  position: relative;
    width: 400px;
    height: 200px;
}

img{
  position: absolute;
  top:0;
  left:0;
}

.product1 img.active{
  transition: all 1s 1s ease-in-out;
  opacity: 1;
}

.product1 img.inactive{
  transition: all 1s ease-in-out;
  opacity: 0;
}

.product1:hover img.active{
  opacity: 0;
}

.product1:hover img.inactive{
  opacity: 1;
}