JSFiddle - React, Tailwind, and code Playground

by Trolstover

HTML

<nav>
    <ul>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div class="one"></div>
        </li>
        <li>
            <div...

CSS

* {
    padding:0;
    margin:0;
    box-sizing: border-box;
}
nav {
    width:100%;
    height:1000px;
    position:absolute;
}
ul {
    position:relative;
    width:100%;
    height:100%;
}
ul li {
    float:left;
    width:100px;
    height:100px;
    border:1px solid black;
    list-style-type:none;
}
.one {
    width:100%;
    height:100%;
    background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrUppLCZ4-n0iffnGtKKAbOCD_jgmyuR3UMAz4E0rieRvNTGrtcw") center fixed;
    opacity:0.5;
    -webkit-transform:scale(1);
    -webkit-transition:.1s ease all;
}

JavaScript

var one = document.getElementsByClassName("one");

function trick(e) {
    var x = e.pageX;
    var y = e.pageY;
    
    e.target.style.opacity=1;
    e.target.style.transform="scale(1.5)";
    function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offsetLeft + (elem.offsetWidth / 2)), 2) + Math.pow(mouseY - (elem.offsetTop + (elem.offsetHeight / 2)), 2)));
    }
    for (var i = 0; i < one.length; i++) {
        if (one[i] == e.target) continue;
        var vektor = calculateDistance(one[i], x, y);
        if (vektor <= 100) {
            var cislo=1+((100-vektor)*0.01); //scale
            var cislo_2=0.5+((100-vektor)*0.01); //opacity
            console.log(one[i].style.transform);
            one[i].style.transform="scale("+cislo+")";
            one[i].style.opacity=cislo_2;
            
        }
        else{
        one[i].style.transform="scale(1)";
            one[i].style.opacity=0.5;
        }
    }
}

function hi(e) {
  return function() {
    trick(e);
  };
}
for(var j=0;j<one.length;j++){
one[j].onmousemove=trick;
}