JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header"></div>
<ul id="nav">
    <li class="home"><a href="#">single line kites</a></li>
</ul>

CSS

#header{
    height:100px;
}

#nav{
    height:34px;
    position:relative;
}

.home{
    position:absolute;
    bottom:0;
    background-image:url(http://gasworks.ravennainteractive.com/result/img/menu/single_line.png);
    background-repeat:no-repeat;
    height:34px;
    width:134px;
}

.home_hover{
    background-image:url(http://gasworks.ravennainteractive.com/result/img/menu/single_line_over.png);
}

JavaScript

$(document).ready(function(){
    $("#nav li").mouseover(function(){
        $(this).addClass('home_hover').stop().animate({ height: '70px'},'slow');
        
    }).mouseout(function(){
        $(this).stop().animate({ height: '34px'},'slow', function(){   
            $(this).removeClass('home_hover');
        })
              
    });
});