JSFiddle - React, Tailwind, and code Playground

by Drath

HTML

<img src="http://lorempixel.com/500/500/cats/1/" />
<img src="http://lorempixel.com/500/500/cats/2/" />
<img src="http://lorempixel.com/500/500/cats/3/" />

CSS

img {
    width: 100px;
    height: auto;
    cursor: pointer;
}

#container img {
    width: 500px;
}

#container {
    width: 500px;
    height: 500px;
    margin-left: -250px;
    margin-top: -250px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto auto;
}

JavaScript

var containerOpened = false;
var images = document.getElementsByTagName("img");

for (var i = 0; i < images.length; i++){
     images[i].addEventListener('mouseup', function() {
         // Don't allow multiple containers
         if (containerOpened) {
             return;
         }
         
         containerOpened = true;
         
         // Clone image
          var clonedImage = this.cloneNode(true);
         
         // Create a container
         var div = document.createElement('div');
         div.setAttribute('id', 'container');
         document.body.appendChild(div);
         
         // Add image to container
         var container = document.getElementById("container");
         container.appendChild(clonedImage);
         container.addEventListener('mouseup', function() {
             this.remove();
             containerOpened = false;
         });
     });
}