JSFiddle - React, Tailwind, and code Playground

by someprimetime

HTML

<div class="container">
    <img src="http://placehold.it/200/200" alt="" class="zoom-thumb" id="img1">
    <div id="zoomed" class="">
        <img src="http://placehold.it/400/400" alt="" class="enlarged" id="enlarged">
    </div>
</div>

CSS

.zoom-wrapper {
    position: relative;
}
.zoom-thumb {
    height: 200px;
    width: 200px;
}
#zoomed .enlarged {
    opacity: 0;
    z-index: -1;
    min-height: 200px;
    min-width: 200px;
    height: 200px;
    width: 200px;
    position: absolute;
    transition: all 1s;
    left: 0px;
    top: 0px;
}
#zoomed.show .enlarged {
    opacity: 1;
    z-index: 2;
    height: auto;
    width: auto;
    min-height: 400px;
    min-width: 400px;
    transform: translateX(200px) translateY(200px);
}

JavaScript

var images = {
            'img1': 'http://placehold.it/400/400'
        };
        document.getElementsByClassName('zoom-thumb')[0].onclick = function () {
            document.getElementById('enlarged').src = images[this.id];
            document.getElementById('zoomed').classList.add('show');
        }
        document.getElementById('enlarged').onclick = function (event) {
            if (event.target != document.getElementsByClassName('zoom-thumb')[0]) document.getElementById('zoomed').classList.remove('show');
        }