JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div class="wrap">
    <div class="first"></div>
    <div class="second"></div>
</div>
<div class="wrap">
    <div class="first"></div>
    <div class="second"></div>
</div>
<div class="wrap">
    <div class="first"></div>
    <div class="second"></div>
</div>

CSS

.first {
    width:100%;
    height:100%;
    background:orange;
    bottom: -300px;
}
.second {
    width:100%;
    height:100%;
    background:rgba(255, 0, 0, 0.31);
    bottom: -300px;
}
.first, .second {
    position: absolute;
    left: 0;
}
.wrap {
    width:300px;
    height:300px;
    position: relative;
    background:black;
    overflow:hidden;
    float: left;
    margin-right: 5px;
}

JavaScript

$('.wrap').hover(

    function () {
        $(this).children('.first').stop().animate({
            bottom: '0px'
        }, 400, 'easeOutBack');
        $(this).children('.second').stop().animate({
            bottom: '30px'
        }, 700, 'easeOutBack');
    },

    function () {
        $(this).children('.first').stop().animate({
            bottom: '-300px'
        }, 100, 'easeOutExpo');
        $(this).children('.second').stop().animate({
            bottom: '-300px'
        }, 400, 'easeOutExpo');

});