JSFiddle - React, Tailwind, and code Playground

by Ehsan Ziya

HTML

<img id='ax' src='https://dl.dropboxusercontent.com/u/141488253/ezgif.com-gif-maker%20(4).gif'></img>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.test {
    cursor: pointer;
}

#ax {
    min-height: 100%;
    min-width: 100%;
    position: fixed;
    z-index: 790;
    mix-blend-mode: multiply;
    display: none;
}

JavaScript

var w = window.innerWidth;
var h = window.innerHeight;
var sw = 7;
var sh = sw * 5.5;
var squares = [];

var map = function (value, istart, istop, ostart, ostop) {
    return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
};
var img = document.getElementById('ax');
var firstSquare = document.createElement('div');
firstSquare.style.height = sh + 'px';
firstSquare.style.width = sw + 'px';
firstSquare.style.top = (h / 2) - (sh / 2) + 'px';
firstSquare.style.left = (w / 2) - (sw / 2) + 'px';
firstSquare.style.border = '1px solid black';
firstSquare.style.position = 'fixed';
firstSquare.className += 'test';
firstSquare.style['background-color'] = 'white';
firstSquare.style['z-index'] = 800;
firstSquare.style['border-radius'] = 3 + 'px';
firstSquare.addEventListener('mouseover', function () {
    this.style['background-color'] = 'black';
    this.style.border = '1px solid white';
    img.style.display = 'block';
    img.src = 'https://dl.dropboxusercontent.com/u/141488253/ezgif.com-gif-maker%20(4).gif';
    squares.forEach(function (square, index) {
        if (index < 1) return;
        square.style['background-color'] = 'white';
        square.style.border = '1px solid black';
    });
});

firstSquare.addEventListener('mouseleave', function () {
    this.style['background-color'] = 'white';
    this.style.border = '1px solid black';
    img.style.display = 'none';
    img.src = '';
    squares.forEach(function (square, index) {
        if (index < 1) return;
        square.style['background-color'] = 'black';
        square.style.border = '1px solid white';
    });
});
document.body.appendChild(firstSquare);
squares[0] = firstSquare;

for (var i = 3; i < 100; i++) {
    var square = document.createElement('div');
    var squareWidth = sw * i * 1.4 * 0.7 * map(i, 3, 500, 1, 26);
    var squareHeight = sh * i * 0.9 * 0.8 * 0.7;
    var radius = i * 10;
    square.style.width = squareWidth + 'px';
    square.style.height = squareHeight + 'px';
   ...