I'm currently working on a grid gallery where I've set the List items to be 20% wide so there can be 5 in one row using float:left. Now, I'm trying to add an overlay effect by using a div with the class "overlay" so that when someone hovers over an Li element, the overlay is shown. However, I'm facing an issue where setting the overlay width and height to 100% covers the entire screen instead of just the Li item. Here's my HTML code:
<ul id="thumbsList">
<li>
<div class="overlay">Hello</div>
</li>
<li><div class="overlay">Hello2</div></li>
</ul>
And here is my CSS:
#thumbsList {
margin: 0px;
padding: 0px;
}
#thumbsList li {
list-style: none;
float: left;
height: 100px;
width: 20%;
background-color: gainsboro;
}
.overlay {
text-align: center;
z-index: 2;
height: 100%;
width: 100%;
position: absolute;
background-color: red;
}
I would greatly appreciate any assistance in fixing this issue. Thank you!