JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image">Click me</div>
<div class="image">Click me</div>
<div class="image">Click me</div>
<div class="image">Click me</div>
<div class="overlay"></div>
<input type="button" value="close" class="button"/>

CSS

* {
    margin:0;
    padding:0;
}
html,body {
    height:100%;
    width:100%;
}
div.image {
    width:200px;
    height:200px;
    margin:10px;
    background:orange;
    display:inline-block;
}
.overlay {
    display:none;
    width:100%;
    height:100%;
    margin:0;
    background:rgba(0,0,0,.5);
    position:fixed;
    top:0;
    left:0;
    z-index:10;
}
.button {
    padding:20px;
    display:none;
    position:absolute;
    top:50%;
    left:50%;
    z-index:15;
}

JavaScript

$(document).ready (function () {
    $('.image').click(function () {
        $('.overlay').fadeIn();
        $('.button').show();
        console.log('clicked');
    });
     $('.button').click(function () {
        $('.button').hide();
        $('.overlay').fadeOut();
    })
})