JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="image-gallery">
    <li class="thumb-item" id="image_1" style="background-image:url('http://placehold.it/200x200');"></li>
    <li class="thumb-item" id="image_2" style="background-image:url('http://placehold.it/200x200');"></li>
    <li class="thumb-item" id="image_3" style="background-image:url('http://placehold.it/200x200');"></li>
    <li class="thumb-item" id="image_4" style="background-image:url('http://placehold.it/200x200');"></li>
</ul>

CSS

ul {
    height:400px;
}
ul li {
    background-repeat:no-repeat;
    background-size:cover;
    float:left;
    list-style-type:none;
    height:200px;
    width:200px;
}

JavaScript

$(document).ready(function () {
    
        $('.thumb-item').on('click', function() {

            var currentId =     $(this).attr('id'),
                extraimg =      $('#' + currentId).clone(),
                currentOffset = $('#' + currentId).offset(),
                parent =        $('.image-gallery'),
                parentOffset =  parent.offset();

            extraimg
                .css({
                    'position': 'absolute',
                  	'background-position': 'top',
                    'top': currentOffset.top + 'px',
                    'left': currentOffset.left + 'px',
                    'margin': '0'
                })
                .appendTo(parent)

                //make bigger
                extraimg.css({
                    'height': parent.height() + 'px',
                    'width': parent.width() + 'px',
                    'top': parentOffset.top + 'px',
                    'left': parentOffset.left + 'px'
                })

                .on('click', function () {
                    $(this).stop(true).remove();
                });

        });

    });