JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<img src="http://i.stack.imgur.com/diq3g.png" alt="image" class="image-profile" height="150" width="150"/>

<div class="change-image">
<a href="/uploaddocument/index">Change Image</a></div></div>
</div>

CSS

.container
{
    height:180px;
    position:absolute;
}

.image-profile
{
    border: 2px #ccccff solid;
}
.change-image
{
    position:absolute;
    bottom:0;
    left:0;
    height:40px;
    width:154px;
    display:none;
    background:#333333;
}
div .change-image
{
    text-align:center;
}
.change-image a
{
    text-decoration:none;
    color:White;
    font-family:Helvetica, Arial;
    
}

JavaScript

var timer;

$('.image-profile').on('mouseenter',function(){
    clearTimeout(timer);
    $('.change-image').stop().show();
}).on('mouseleave',function(){
    timer = setTimeout(function(){
         $('.change-image').fadeOut()
    }, 5000);
});