JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="content-master">
        <div id="content-1" >
            Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga.
        </div>
        
        <div id="content-2">
            <img src="http://works.mihaimoga.com/stackoverflow_logo.jpg"/>
        </div>
    </div>
</div>

CSS

#container{
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

#content-master {
    width: 200px;
    height: 200px;
    top: 0px;
    position: relative;
}

#content-1 {
    background-color: #e7e7e7;
    width: 200px;
    height: 200px;
    text-align: center;
}

#content-2 {
    width: 200px;
    height: 200px;
}

#content-2 img {
    width: 200px;
    height: 200px;
}

JavaScript

$(document).ready(function() {
    $('#content-master').on('mouseover', function() {
        $(this).stop().animate({
            top: "-200px"
        }, 500);
    });
    $('#content-master').on('mouseout', function() {
        $(this).stop().animate({
            top: "0px"
        }, 500);
    });
});