JSFiddle - React, Tailwind, and code Playground

by Josh Krauth-Harding

HTML

<span class="img-overlay" id="seeyouagain">
  <img src="http://via.placeholder.com/300x300">
</span>

CSS

.img-overlay {
  position: relative;
  display: inline-block;
}

.img-overlay::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.25s opacity ease;
}

#seeyouagain::before {
  background: pink;
}

.img-overlay:hover::before {
  opacity: 1;
}