JSFiddle - React, Tailwind, and code Playground

HTML

<div class="frame">
    <div class="under">
        <img src="http://www.thetimes.co.uk/tto/multimedia/archive/00342/114240651_cat_342943c.jpg">
        <div class="over"><a href="http://www.w3schools.com/css/css_positioning.asp"></br><span>Link 1</span></a>
            </br>
            </br>
            </br><a href="http://smallbusiness.chron.com/stretch-image-horizontally-css-43652.html"><span>Link 2</span></a>
        </div>
    </div>
</div>

CSS

.frame {
    position:absolute;
    width:400px;
    height:300px;
}
.under {
    width: 100%;
    height: 100%;
    z-index:1;
}
.under img {
    width: 100%;
    height: 100%;
}
.over {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 36px;
    text-align: center;
    color: yellow;
    background: rgba(64, 64, 64, 0.5);
    top: 0;
    left: 0;
    z-index:2;
    display: none;
}
span {
    margin-left:auto;
    margin-right:auto;
    background-color:white;
}

JavaScript

$('.under').hover(function () {
    $('.over').fadeIn();
}, function () {
    $('.over').fadeOut();
});