JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div class="parent">
  <img alt="Parent Image" src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg" />
  <img class="child" alt="Child Image" src='https://images.unsplash.com/photo-1601979031925-424e53b6caaa?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8fA%3D%3D' />
</div>

CSS

.parent {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  width: 100px;
}

.parent:hover .child {
  opacity: 1;
}