JSFiddle - React, Tailwind, and code Playground

HTML

<div><img src="https://mdn.mozillademos.org/files/2767/hut.jpg"><div>

CSS

div {
  width: 350px;
  height: 350px;
}

div img {
  position: absolute;
  display: block;
  clip: rect(0, 175px, 350px, 0);
  transition: all 0.5s ease-out;
}

div:hover img {
  clip: rect(0px, 350px, 350px, 175px);
}