JSFiddle - React, Tailwind, and code Playground

HTML

<div id="img-cover"></div>
<div id="img-container">HEY</div>
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3yAltrbdF42y0e2tQF_HdoDW-8l7v5nf0V4ALdaK7TtG2wE_X" />
<img class="img" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRILLPIEsVSAfD40KRLY1y_7SdcxM5BWGpO-W1ijl8ryvykmFhX" />

CSS

#img-cover {
    position: absolute;
    display:none;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:black;
    opacity:0.6;
    z-index:9998;
}
#img-container {
    position:fixed;
    display:none;
    top:77%;
    left:50%;
    margin-top:-50px;
    margin-left:-100px;
    z-index:9999;
}

JavaScript

$('.img').on('click', function (e) {
    $('#img-cover').fadeIn();
    var img = $(this);
    $('#img-container').html(img.clone())
        .css({
        'margin-top': '-' + img.height() / 2 + 'px',
            'margin-left': '-' + img.width() / 2 + 'px'
    }).fadeIn();
});

$('#img-cover').on('click', function () {
    $('#img-cover').fadeOut();
    $('#img-container').fadeOut();
});