JSFiddle - React, Tailwind, and code Playground

by malamine_kebe

HTML

<div class="frame">
	<div class="main">main<br>main<br>main<br>main<br></div>
	<div class="bottom"></div>
</div>

CSS

.frame{
	position: absolute;
	top:200px;
	left:200px;
	width:100px;
}

.main{
	position: absolute;
	z-index:2;
	max-width: 100%;
	background-color: red;
	width:100%;
}

.bottom{
	position:absolute;
	bottom:0px;
	width:100%;
	z-index:1;
}

.frame:hover .main{
	opacity:0.5;
}

JavaScript

$('.frame').css({'height':$(this).find('.main').height()});

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

		if(mEnt == true){
			bottom.html('bottom<br>bottom<br>bottom<br>bottom');
			d = bottom.height();
			setTimeout(function() {
				el.stop(true,true).css({'z-index':'4'}).animate({
					'height':'+='+d
				});	
			bottom.stop(true,true).show();
			},300);
		}else{
			d = bottom.height();
			setTimeout(function() {
				el.stop(true,true).animate({
					'height':'-='+d
				});
			},300);
		}
	});