JSFiddle - React, Tailwind, and code Playground

by chadarsenault

HTML

<div class="container">
    <div class="wrapper">
        <div class="text">This is some stuff<div class="slider">This is some more stuff.</div>.</div>
    </div>
</div>

CSS

* { -webkit-box-sizing: border-box; box-sizing: border-box; }
.container {
    height: 200px;
    position: relative;
    border: 1px solid #000;
}
.wrapper {
    width: 80%;
    background-color: #f90;
    overflow: hidden;
    position: absolute;
    bottom: 0;
}

.text {
    margin: 1em;
    position: relative;
}

.slider {
    padding-top: 1em;
    position: absolute;
    bottom: -40px;
}

JavaScript

var wrapperHeight = $('.wrapper').height();
var textHeight = $('.text').height();
var sliderHeight = $('.slider').height();

$('.wrapper').on('mouseenter', function() {    
    $(this).stop(true).animate({'height':wrapperHeight + textHeight + sliderHeight},300);
});

$('.wrapper').on('mouseleave', function() {
    $(this).removeClass('slideup');
    var curHeight = $(this).height();
    var autoHeight = $(this).css('height', 'auto').height();
    $(this).height(curHeight);
    $(this).stop(true).animate({'height':autoHeight+'px'},300);
});