/<div class="container" id="container">
</div>

    .container{
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-auto-rows: repeat(16, 1fr);
  width: 95%;
  height: 95%;
  border: 1px solid black;
  margin: auto;
}

#block{
  background: white;
  padding: 12.5px;
}

#block:hover{
  background:;
}

.color{
  background: rgba{0,0,0,0.1}
}

     for (var i=0; i<(16*16); i++){
  var iDiv = document.createElement('div');
  iDiv.textContent = "  ";
  iDiv.id = 'block';
  iDiv.className = 'block';
  var container = document.getElementById("container");

  container.appendChild(iDiv);

  iDiv.addEventListener("mouseover", function( event ) {
    // highlight the mouseover target
    this.style.backgroundColor = "black";
    this.style.opacity += 0.2;

    // reset the color after a short delay
    setTimeout(function() {
      this.target.style.color = " ";
    }, 500);
  }, false);

 }