JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navlink home" data-link="home">
    <span class="top">Home</span>
</div>
<div class="navlink resume" data-link="resume">
    <span class="top">Resume</span>
</div>
<div class="navlink portfolio" data-link="portfolio">
    <span class="bottom">Portfolio</span>
</div>

CSS

.home {
    position:absolute;
    left:429px;
    top:0px;
    width:143px;
    height:153px;
    background-image: url(http://zobgib.com/test/static/img/banner/home.png);
    background-repeat: no-repeat;
    
}

.home span {
    position: absolute;
    text-align: center;
}

.resume {
    position:absolute;
    left:713px;
    top:0px;
    width:143px;
    height:153px;
    background-image: url(http://zobgib.com/test/static/img/banner/resume_long.png);
    
}

.portfolio {
    position:absolute;
    left:572px;
    top:153px;
    width:140px;
    height:149px;
    background-image: url(http://zobgib.com/test/static/img/banner/portfolio_long.png);
    
}

JavaScript

$(document).ready(function() {
    $(".navlink").hover( 
        function () { 
            $(this).delay(100).animate({backgroundPosition: "-100% 0"}, 400);
            $(this).find("span").css("textDecoration","underline");
        },
        function () {
            $(this).queue("fx", []);
            $(this).animate({backgroundPosition: "0% 0%"}, 400);
            $(this).find("span").css("textDecoration","none");
        }
    );
})