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').mouseover(function () {
        $('.change-image').stop().show();

        if ($('.image-profile').mouseout() == true) {
            TimeOut();
        }
    }).mouseout(function () {
        setInterval(function TimeOut() {
            $('.change-image').fadeOut()
        }, 5000);
    });
});