JSFiddle - React, Tailwind, and code Playground

by malamine_kebe

HTML

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

CSS

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

	.middle{
		width:200px;
		height:200px;
		position: absolute;
		top:0px;
	}

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

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

JavaScript

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

		if(t == null){
			t = el.offset().top;
			h = el.height();
		}

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