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

$(function () {
        $('.image-profile').mouseenter(function () {
            $('.change-image').stop().show();
        });

    $('.image-profile').mouseleave(function () {
        setTimeout(function TimeOut() {
            $('.change-image').fadeOut()
        }, 5000);
    });



    });