JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div">
    <div class='overlay'><p>X</p></div>
    <img src="http://fc02.deviantart.net/fs71/f/2012/157/c/a/watch_dogs___wallpaper__2_by_danielskrzypon-d52hvi1.png"/>
</div>

CSS

.div{
    height:400px;
    width:400px;
    float:left;
    cursor:pointer;
}
img{
    height:400px;
    width:400px;
}
.overlay{
    height:400px;
    width:400px;
    position:absolute;
    background:rgba(0,153,255,.8);
    text-align:center;
    display:none;
}
.overlay p{
    color:white;
    line-height:400px;
    font-size:80px;
    margin:0;
}

JavaScript

$(document).ready(function(){
    $(".div").mouseenter(function(){
        $(".overlay").fadeIn('slow');
    });
    $(".div").mouseleave(function(){
        $(".overlay").fadeOut('slow');
    });
})