JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<ul>
    <li id="one">
        <div>
            <h4>title</h4>
            <p>description</p>
        </div>
    </li>
</ul>

CSS

#one {
    overflow: hidden;
    position: relative;
    border: 1px solid gray;
    min-height: 40px;
    
}

#one div { 
    position: absolute;
    bottom: -100%;
}

JavaScript

$('#one').hover(
        function() {
            $(this).find('div').animate({
                bottom: '0%'
            }, 'fast' );
        },function() {
            $(this).find('div').animate({
                bottom: '-100%'
            },'fast');
        }
    );