JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<div id="box">   
   <div id="hoveredBox"></div> 
</div>

CSS

#box{
    background: #f2f2f2;
    width: 200px;
    height: 200px;
    position: relative;
    border-top: 2px solid #dedede;
}

#hoveredBox{
    background: #dedede;
    width: 200px;
    /*height: 200px;*/
    position: absolute;
    bottom: 0;
    left: 0;
}

JavaScript

$(document).ready(function(){    
    $('#box').hover(function() {
        var hoverBox = $('#hoveredBox');
        var hoverBoxHeight = hoverBox.innerHeight();
        //console.log(hoverBoxHeight);
        
        $('#box').find('#hoveredBox').stop().animate({ height : 200 }, 275);
    }, function(){
        $('#box').find('#hoveredBox').stop().animate({ height : 0}, 275);   
    });    
});