My full-width and height div is overlaid by li elements. The li's have a width of 10% and a height of 20vh to create square shapes within the entire div. However, resizing is causing alignment issues for the div.
Despite my attempts using % and vh units, the resizing problem persists. I aim to replicate the design seen on this website:
jQuery(function($) {
$('.squares li').mouseenter(function() {
$(this).animate({
opacity: '0.4'
});
}).mouseout(function() {
$(this).animate({
opacity: '0'
});
});
});.squares {
position: absolute;
top: 0;
z-index: 99;
left: 0;
padding: 0;
margin: 0;
width: 100%;
}
.squares li {
width: 10%;
height: 20vh;
list-style-type: none;
background: none;
float: left;
background: #ccc;
transition: 0.4s;
opacity: 0;
cursor: pointer;
}
main {
width: 100%;
height: 100vh;
background-image: url("/images/bg.png");
background-repeat: no-repeat;
background-size: cover;
position: relative;
display: table;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
<ul class="squares">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</main>