JSFiddle - React, Tailwind, and code Playground

HTML

<div id="overlay"></div>
<div id="overlayContent">
    <img id="imgBig" src="" alt="" width="400" />
</div>

<img id="imgSmall" width="200" src="http://www.freeimageslive.com/galleries/space/earth/pics/a17_h_148_22718.gif" alt="" />

CSS

#overlay{
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    background-color: #000; 
    opacity: 0.7;
    filter: alpha(opacity = 70) !important;
    display: none;
    z-index: 100;
    
}

#overlayContent{
    position: fixed; 
    width: 100%;
    top: 100px;
    text-align: center;
    display: none;
    overflow: hidden;
    z-index: 100;
}

#contentGallery{
    margin: 0px auto;
}

#imgBig, #imgSmall{
    cursor: pointer;
}

JavaScript

$("#imgSmall").click(function(){		                                        $("#imgBig").attr("src","http://www.freeimageslive.com/galleries/space/earth/pics/a17_h_148_22718.gif");
    $("#overlay").show();
    $("#overlayContent").show();
});

$("#imgBig").click(function(){
    $("#imgBig").attr("src", "");
    $("#overlay").hide();
    $("#overlayContent").hide();
});