JSFiddle - React, Tailwind, and code Playground

by cs3vigny

HTML

<div class="slider">
    <div class="overlay"></div>
</div>

CSS

.slider {
    background: #cccccc;
    width:200px;
    height:200px;
    overflow: hidden;
}
.overlay {
    top: -200px;
    background: #333333;
    width:200px;
    height:200px;
    position: relative;
    color: #fff;
}

JavaScript

$(document).ready(function () {

    var $caption = $('.slider').find('.overlay');
    var pheight = $('.slider').height();
    $caption.css('top', pheight);
    $('.slider').hover(

    function () {
        $caption.stop(1);
        $caption.animate({
            top: pheight - $caption.height()
        });
    },

    function () {
        $caption.stop(1);
        $caption.animate({
            top: pheight
        })
    })

});