JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
 <div class="child-parent">
    <div class="child">ховер контент<br>ффффффффф</div>
 </div>
  <div>Какой то текст</div>
</div>

CSS

body {
  padding: 20px;
}

.child {
   transform: translateY(100%);
}

.parent:hover .child {
  transition: 1s;
  background: red;
   transform: translateY(0)
}

.child-parent {
  position: relative;
  overflow: hidden;
}