JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    Hover me!
    <div id="funbox"></div>
</div>

CSS

#container {
    width:960px;
    height:300px;
    line-height:300px;
    text-align:center;
    margin:100px auto;
    background:#000;
    color:#fff;
    position:relative;
    overflow:hidden;
}

#funbox {
    width:50px;
    height:50px;
    background:red;
    position:absolute;
    top:-50px;
    left:0;
    
    
  -webkit-transition: top 0.3s ease-out, color .9s ease-out; 
     -moz-transition: top 0.3s ease-out, color .9s ease-out; 
       -o-transition: top 0.3s ease-out, color .9s ease-out; 
          transition: top 0.3s ease-out, color .9s ease-out;

}

#container:hover #funbox {
    top:50px;
    background:orange;
    
    
  -webkit-transition: top 0.3s ease-out, color .9s ease-out; 
     -moz-transition: top 0.3s ease-out, color .9s ease-out; 
       -o-transition: top 0.3s ease-out, color .9s ease-out; 
          transition: top 0.3s ease-out, color .9s ease-out;
}