JSFiddle - React, Tailwind, and code Playground

HTML

<div class="frame">
	<div class="top">top</div>
	<div class="middle">middle</div>
	<div class="bottom">bottom</div>
</div>

CSS

.frame{
		border-style: solid;
		border-width: 1px;
		width:200px;
		height:200px;
		position: absolute;
		top:50px;
		left:50px;
	}

	.middle{
		width:100%;
		position: absolute;
	}

	.top{
		display:none;
		background-color:red;
		width:100%;
	}

	.bottom{
		position:absolute;
		display:none;
		bottom:0px;
		background-color:red;
		width:100%;
	}

JavaScript

$(document).on('mouseenter mouseleave', '.frame', function( e ) {
		var el = $(this),
			top = el.children('.top'),
			bottom = el.children('.bottom'),
			middle = el.children('.middle'),
			d = bottom.height()+0,
			mEnt = e.type == "mouseenter";

		if(mEnt == true){
            middle.animate({'top':'0px'});
			el.stop().animate({
				'height':'+='+d,
				'top':'-=20'
			});	
			top.stop().fadeIn(300);
			bottom.stop().fadeIn(300);
		}else{
			middle.stop().animate({'top':'0px'});
			el.stop().animate({
				'height':'-='+d,
				'top':'+=20'
			});
			top.stop().fadeOut(300);
			bottom.stop().fadeOut(300);
		}
	});