JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <span class="title">Title</span><br/>
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
    <img class="image" src=""/>
</div>

<br/>
<button id="remove">remove overlay</button>

CSS

#outer {
    width: 400px;
    height: 220px;
    background-color: green;
    position: absolute;
}

.title {
    font-size: 32px;
    font-weight: bold;
}

.box {
    width: 80px;
    height: 120px;
    border: 1px solid gray;
    background-color: rgba(100,0,0,0.9);
    position: relative;
    display: inline-block;
    margin-right: 5px;
}

.image {
    position: relative;
    float: right;
    margin-right: 4px;
    width: 110px;
    height: 120px;
    background-color: white;    
}

#remove {
    top: 200px;
    position: relative;
}

JavaScript

$(function() {
    var $outer = $('#outer'),
        $overlay = $('<div>', {
            css: {
                position: 'absolute',
                width: $outer.outerWidth(),
                height: $outer.outerHeight(),
                top: $outer.position().top,
                left: $outer.position().left,
                backgroundColor: 'rgba(255,255,255,0.5)',
                zIndex: 10,
                display: 'none'        
            }
    }).appendTo( $outer );
    
    $outer.on('click', '.box', function(e) {
        var $this = $(this);
        alert('you clicked box ' + this.textContent );
        
        $this.css( 'z-index', 11 );
        $overlay.data('current', $this).show();
    });
    
    $('#remove').on('click', function() {
        $overlay.hide();
        $overlay.data('current').css('z-index', 1);
    });
});