JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <img class="img1" src="https://hsto.org/files/da3/bd5/ecd/da3bd5ecd9bd422c843de05a208cee2d.png" alt="">
</div>

<div>
  <img class="img2" src="https://hsto.org/files/da3/bd5/ecd/da3bd5ecd9bd422c843de05a208cee2d.png" alt="">
</div>

CSS

.img1 {
  filter: drop-shadow(0px 0px 1px red);
}

.img2 {
  filter: drop-shadow(0px 0px 0px transparent);

}

.img2:hover {
  filter: drop-shadow(0px 100px 0px red);
  position: absolute;
  top: -48px;
}