JSFiddle - React, Tailwind, and code Playground

by ravan

HTML

<div id="bar">
    <ul>
        <li>Text</li>
        <li class="slide">Hover here</li>
        <li>Text</li>
    </ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
#bar {
    position: fixed;
    bottom: 0;
    background: red;
    width: 100%;
    text-align: center;
    height: 40px;
}
#bar ul {
    height: 40px;
}
#bar ul li {
    display: inline-block;
    height: 40px;
    width: 100px;
    background: #ccc;
}
.slide {
    position: relative;
}

JavaScript

$(function () {
    $('.slide').on('mouseenter', function () {
        $(this).animate({
            height: '60px',
            top: '-20px'
        }, 500);
    }).on('mouseleave', function () {
        $(this).animate({
            height: '40px',
            top: 0
        }, 500);
    });
});