JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="image">replace me with the image</div>
</div>

CSS

#container{
   width:200px;
    background-color:#ccc;
    position:relative;
    height:300px;
    border:1px solid black;
}

#image{
  width:200px;
  height:50px;
  top:0px;
  left:0px;
  position:absolute;
    /*the following properties should be removed for image*/
  background-color:#777;
  color:white;
  text-align:center;
}

JavaScript

$('#image').animate({
// animate top->bottom
    top:250/*height of container - height of image*/
},1000, function(){
// animate bottom-top
    $(this).animate({top:0},1000);
});