JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="box">
    <div class="title">滑鼠滑入.box出現</div>
  </div>
</body>

CSS

.box{
  width: 300px;
  height: 200px;
  border:1px solid #e65775;
  overflow:hidden;
  position:relative;
}
.box:hover .title{
  bottom:0;
}
.title{
  color:#fff;
  background: #e65775;
  padding:10px 0;
  text-align:center;
  width: 100%;
  position:absolute;
  bottom:-50px;
}