JSFiddle - React, Tailwind, and code Playground

by anoopsuda

HTML

<div class="img-toggle-box">
  <img src="image1.png" class="img-default">
  <img src="image2.png" class="img-hover">
</div>

SCSS

.img-toggle-box {
  width: 150px;         /* adjust as needed */
  height: 150px;
  position: relative;
  cursor: pointer;
}

/* default image visible */
.img-default {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* hover image hidden by default */
.img-hover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 0.3s ease;
}

/* show hover image, hide default image */
.img-toggle-box:hover .img-hover {
  opacity: 1;
}

.img-toggle-box:hover .img-default {
  opacity: 0;
}