JSFiddle - React, Tailwind, and code Playground

by yash009

HTML

<div class="card">
    <img src="/images/ee0.png" alt="Card Back" id="yy1" >
    <img src="/images/ee1.png" class="img-top" alt="Card Front" id="yy2" >
</div>

CSS

.card {
  position: relative;
  display: inline-block;
}

.card .img-top {
 display: none;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 99;
}

.card:hover .img-top {
 display: inline;
 transition-duration: opacity 1s linear;
}

#yy1, #yy2 {
  width: 300px;
}