JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div id="div1">
	<div id="div2">
		<div id="div3">Home</div>
	</div>
</div>

CSS

#div1{
	background: red;
	height: 300px;
	width: 100px;
	z-index: 2;
}
#div2{
	background: black;
	height: 0px;
	position: relative;
	width: 100%;
	z-index: 5;
}
#div3{
	color: yellow;
	position: relative;
	top: 50%;
	text-align: center;
	z-index: 6;
}

JavaScript

$(function(){
	var alto_mayor = $("#div1").height();
	console.log(alto_mayor);
	var posicion_inicial_menor = alto_mayor / 2;
	console.log(posicion_inicial_menor);
	$("#div2").css({
		top: posicion_inicial_menor
	});

	$("#div1").hover(
		function(){
            //con el stop() hacemos que la funcion no se ejecute repetidamente si no solo cuando pase el hover y se terminara si lo retira
			$("#div2").stop().animate({height:alto_mayor, top:0}, 1000);
		},
		function(){
			$("#div2").stop().animate({height:0, top:posicion_inicial_menor}, 1000);
		}
	);
});