I read the following article on Medium.com which helped me to create the effect I was looking for.
That's the good side of the story. The "bad" side is that because of the way it is structured, it prevents you from interacting with buttons "below" the grid. Does anyone know how to create the effect and being able to interact with buttons
$(document).ready(function() {
var $grid = $('.grid')
var $gridItem = $('.grid__item')
var gridItemHeight = $gridItem.height()
var gridItemWidth = $gridItem.width()
var horzCount = Math.floor($grid.width() / gridItemWidth)
var vertCount = Math.floor($grid.height() / gridItemHeight)
var totalGridItems = horzCount * vertCount
for (var i = 0; i < totalGridItems; i++) {
var $gridItemClone = $gridItem.clone();
$grid.append($gridItemClone);
}
})main {
position: relative;
width: 100vw;
}
.grid {
z-index: 99;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
}
.grid__item {
height: 60px;
width: 60px;
opacity: 0;
transition: opacity 2s ease 0.4s;
background-color: black;
border-radius: 0.1 rem;
}
.grid__item:hover {
opacity: 1;
transition: opacity 0.1s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="grid">
<div class="grid__item"></div>
</div>
<main>
<button>Hokay!</button>
</main>