JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="caption">Caption</div>
<div class="showme">Showme</div>

<div class="parent">
    <div class="top"></div>
    <div class="bottom"></div>
</div>

CSS

.parent {
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
    border: 1px solid #333;
    margin: 30px;
}

.top {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 200px;
    height: 200px;
    background: green;
    opacity: 0.5;
}

.bottom {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 200px;
    height: 30px;
    background: red;
    opacity: 0.5;
}


.caption, 
.showme {
    font-size: 21px;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: bold;
    margin: 13px;
}

.caption {
    color: green;
    opacity: 0.5;
}

.showme {
    color: red;
    opacity: 0.5;
}

JavaScript

var parent = $('.parent'); 
var top = $('.top'); 
var bottom = $('.bottom'); 

top.css({ height: '0' });

parent.mouseenter(function() {
    
    top
        .stop()
        .animate({ height: '60' }, 600);
    bottom
        .stop()
        .animate({ bottom: parent.height() - bottom.height() }, 600);
});

parent.mouseleave(function() {
    top
        .stop()
        .animate({ height: '0' }, 600);
    bottom
        .stop()
        .animate({ bottom: '0' }, 600);
});