JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rel-wrap">
    <img src="http://placekitten.com/g/920/300" width="920" height="300" class="my-img">
    <div class="my-div">
        Redbox
    </div>
</div>

CSS

.rel-wrap {
    position:relative;
    width:920px;
    height:300px;
    border: solid 1px #ccc;
}

.my-div{
    position: absolute;
    background: red;
    width: 920px;
    height: 300px;
    top: -940px;
    left: 0px;
}

JavaScript

$(document).ready(function(e) {
    $('.my-img').hover(function(){
        $('.my-div').animate({top: '0px'}, 1000)
        }, function(){
        $('.my-div').delay( 1000).animate({left: '-940px'}, 1000)
    });
});