JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
  <div class="content"></div>
  <div class="huj"></div>
</div>

CSS

.block {
  margin-top: 50px;
  width: 300px;
  transition: transform 200ms;
  overflow: hidden;
}

.content {
  width: 100%;
  height: 250px;
  background: gray;
}

.block:hover {
  transform: translateY(-50px);
}

.block:hover .huj {
  transform: scaleY(1);
}

.huj {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms;
  width: 100%;
  height: 50px;
  background: tomato;
  overflow: hidden;
}