JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
 
</div>

CSS

div.box {
  width: 450px;
  height: 450px;
  overflow:hidden;
  border: 1px solid black;
}
div.box:after {
  content: '';
  display: table;
  clear: both;
}
div.box div.luka {
  width: 50px;
  height: 50px;
  position: relative;
  float: left;
  transition: 1s;
  z-index: 3;
}
div.box div.luka:hover {
  background: grey;
}
div.box div.luka:hover span {
  opacity: .5;
  visibility: visible;
  transition: 1s;
}

span {
  opacity: 0;
  transition: 1s;
  visibility: hidden;
  /* z-index: 999; */
}
span.left {
  width: 50px;
  height: 50px;
  background: grey;
  position: absolute;
  display: inline-block;
  left: -50px;
}
span.right {
  width: 50px;
  height: 50px;
  background: grey;
  position: absolute;
  display: inline-block;
  left: 50px;
}
span.top {
  width: 50px;
  height: 50px;
  background: grey;
  position: absolute;
  display: inline-block;
  left: 0px;
  top: -50px;
}
span.bottom {
  width: 50px;
  height: 50px;
  background: grey;
  position: absolute;
  display: inline-block;
  left: 0px;
  top: 50px;
}

JavaScript

var x = 81; 
for(var i = 0; i < x ; i++) {
var a = document.createElement('div');
a.classList.add('luka')
var a_left = document.createElement('span');
a_left.classList.add("left");
var a_right= document.createElement('span');
a_right.classList.add("right");
var a_top = document.createElement('span');
a_top.classList.add("top");
var a_bottom = document.createElement('span');
a_bottom.classList.add("bottom");
a.append(a_bottom);
a.append(a_left);
a.append(a_top);
a.append(a_right);
var b = document.querySelector('.box');
b.append(a);
}