JSFiddle - React, Tailwind, and code Playground

by l2banners

HTML

<div class="icon">
  <img src="https://habrastorage.org/webt/62/12/9c/62129c810f74c008236981.png" alt="" class="icon__img">
  <img src="https://habrastorage.org/webt/jr/ok/6i/jrok6iv0opc_o_2cee-0wbe5p-8.jpeg" alt="" class="icon__img icon__img_hover">
</div>

CSS

.icon {
  position: relative;
  z-index: 0;
  display: inline-block;
}

.icon__img {
  display: inline-block;
}

.icon__img_hover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  z-index: 5;
  transition: .2s all;
}

.icon:hover .icon__img_hover {
  opacity: 1;
}