JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="wrap">
    <div class="expand-elem" style="background-image: url(https://ununsplash.imgix.net/photo-1434394673726-e8232a5903b4?fit=crop&fm=jpg&h=700&q=75&w=1050);"></div>
    <div class="expand-elem" style="background-image: url(https://ununsplash.imgix.net/photo-1433833103303-111110aae192?fit=crop&fm=jpg&h=700&q=75&w=1050);"></div>
    <div class="expand-elem" style="background-image: url(https://ununsplash.imgix.net/photo-1433785124354-92116416b870?fit=crop&fm=jpg&h=700&q=75&w=1050);"></div>
    <div class="expand-elem" style="background-image: url(https://ununsplash.imgix.net/photo-1433733071959-30cd185d14a8?fit=crop&fm=jpg&h=800&q=75&w=1050);"></div>
    <div class="expand-elem" style="background-image: url(https://unsplash.imgix.net/photo-1433354359170-23a4ae7338c6?fit=crop&fm=jpg&q=75&w=1050);"></div>
    <div class="expand-elem" style="background-image: url(https://ununsplash.imgix.net/photo-1434394673726-e8232a5903b4?fit=crop&fm=jpg&h=700&q=75&w=1050);"></div>
    <div class="expand-elem" style="background-image: url(https://ununsplash.imgix.net/photo-1433833103303-111110aae192?fit=crop&fm=jpg&h=700&q=75&w=1050);"></div>
    <div class="expand-elem" style="background-image: url(https://ununsplash.imgix.net/photo-1433785124354-92116416b870?fit=crop&fm=jpg&h=700&q=75&w=1050);"></div>
    <div class="expand-elem" style="background-image: url(https://ununsplash.imgix.net/photo-1433733071959-30cd185d14a8?fit=crop&fm=jpg&h=800&q=75&w=1050);"></div>
    <div class="expand-elem" style="background-image: url(https://unsplash.imgix.net/photo-1433354359170-23a4ae7338c6?fit=crop&fm=jpg&q=75&w=1050);"></div>
    <div class="expand-elem" style="background-image: url(https://ununsplash.imgix.net/photo-1434394673726-e8232a5903b4?fit=crop&fm=jpg&h=700&q=75&w=1050);"></div>
    <div class="expand-elem" style="background-image: url(https://ununsplash.imgix.net/photo-1433833103303-111110aae192?fit=crop&fm=jpg&h=700&q=75&w=1050);"></div>
    <div...

SCSS

.wrap{
    &:after{
        content: '';
        display: table;
        clear: both;
    }
    &:before{
        content: '';
        zoom: 1;
    }
    & > div{
        width: 33.3333%;
        float: left;
    }
}
.expand-elem{
    background-size: cover;
    background-position: center center;
    overflow: hidden;
    &:not(.pseudo):after{
        content: '';
        display: block;
        padding-top: 100%;
    }
    &.pseudo{
        position: fixed;
        transition: opacity 500ms, top 500ms, width 500ms, height 500ms, left 500ms;
        width: auto;
        float: none;
        z-index: 99;
        &.expand{
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
        }
    }
}
#exp-fader{
    z-index: 98;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    position: fixed;
    background-color: rgba(50, 50, 50, 0.5);
    animation: exp-fader 500ms forwards;
}

@keyframes exp-fader{
    from{
        opacity: 0;
    }
    to{
        opactiy: 1;
    }
}

JavaScript

/**
 * Position lock image expand
 */
var expandImg = {
    processing: false,
    init: function () {
        var elems = document.querySelectorAll('.expand-elem:not(.exp-bound)');
        for (var i = 0; i < elems.length; i++) {
            elems[i].addEventListener('click', function (e) {
                if (!expandImg.processing) {
                    expandImg.processing = true;
                    var viewCoords = {
                        posX: (window.pageXOffset || document.documentElement.scrollLeft),
                        posY: (window.pageYOffset || document.documentElement.scrollTop),
                        dX: window.innerWidth,
                        dY: window.innerHeight
                    }
                    console.log(viewCoords);
                    var rect = this.getBoundingClientRect();
                    var elemCoords = {
                        top: rect.top,
                        left: rect.left,
                        width: rect.width,
                        height: rect.height
                    }
                    console.log(elemCoords);
                    var bgImg = this.style.backgroundImage,
                        _elem = document.createElement('div'),
                        _fader = document.createElement('div'),
                        styleStr;
                    _fader.setAttribute('id', 'exp-fader');
                    document.body.appendChild(_fader);
                    _elem.setAttribute('id', 'exp-p-run');
                    styleStr = 'background-image: ' + bgImg + ';';
                    styleStr += 'top: ' + elemCoords.top + 'px;';
                    styleStr += 'left: ' + elemCoords.left + 'px;';
                    styleStr += 'width: ' + elemCoords.width + 'px;';
                    styleStr += 'height: ' + elemCoords.height + 'px;';
                    _elem.className = 'expand-elem exp-bound pseudo';
                    _elem.setAttribute('style', styleStr);
                   ...