JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    SOME OUTER CONTENT!
    <div class="slider">SOME INNER CONTENT!</div>
</div>

CSS

body {
    font-size: 8pt;
}
.outer {
    overflow: hidden;
    background-color: #FEE;
    border: 1px solid #800;
    color: #C00;
    height: 174px;
    width: 100px;
}

.slider {
    background-color: #EFE;
    height: 150px;
    border: 1px solid #080;
    color: #0C0;
    position: relative;
    top: 120px;
}

JavaScript

$(document).ready(function() {
    $('.slider').hover(
        /* mouseover */
        function(){
            $(this).animate({
                top : '-=120'
            }, 300);
        },
        /* mouseout*/
        function(){
            $(this).animate({
                top : '+=120'
            }, 300);
        }
    );
});