JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item-wrapper">
  <div class="content">
    Hello I am content. All that matters for this method to work is that the item wrapper has a fixed size. In my working project, the width is set to a % value, and the height to rem.
  </div>
  <div class="popup-title">
    <span>A title for my content</span>
  </div>
</div>

CSS

.item-wrapper{
    height:22rem;
    position:relative;
    overflow:hidden;
    color:white;
    font-family:sans-serif;
  }
  
  .content{
    height:100%;
    background-color:red;
    padding:10px;
  }
  
  .popup-title{
    position:absolute;
    top:100%;
    bottom:0%;
    width:100%;
    transition: bottom 0.5s, top 0.5s;
    vertical-align: bottom;
  }

.popup-title span{
      display:block;
      margin:0;
      background-color: black;
}

.item-wrapper:hover .popup-title{
        bottom:0%;
        top:0%;
}