title: Half shown div slides up on hover
body: <p>Currently, I copy this code that shows a hidden div on hover</p>
  
  <p><a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_slidebottom" rel="nofollow noreferrer">example</a></p>
  
  <p>but what I want is something like this</p>
  
  <p><a href="https://i.stack.imgur.com/f5a4y.png" rel="nofollow noreferrer">goal</a></p>
  
  <p>What I want is when you hover on title on the 1st box, shown on the 2nd picture, the div containing the title will slide up and occupy the whole space, revealing the other contents below the title.</p>
  
  <p>Can someone recommend me a tutorial similar to this? Thanks in advance :)</p>