I'm currently tackling a frontend mentor project, and I've hit a roadblock trying to get my image overlay to position itself over the image rather than below it. I've set the parent position to relative and the overlay to absolute, but so far I haven't had any luck. There's got to be something simple that I'm overlooking, but for the life of me, I can't spot it.
.container-main {
display: block;
justify-content: center;
width: auto;
padding: 2em;
max-width: 80rem;
background-color: hsl(216, 50%, 16%);
border-radius: 0.9375rem;
}
.nft {
position: relative;
width: 100%;
height: auto;
max-width: 21.875rem;
max-height: 21.875rem;
border-radius: 0.625rem;
}
/* The overlay effect (full height and width) - lays on top of the container and over the image */
.overlay {
position: absolute;
height: 100%;
width: 100%;
max-width: 21.875rem;
max-height: 21.875rem;
border-radius: 0.625rem;
opacity: 0;
transition: .3s ease;
background-color: hsl(178, 100%, 50%, .4);
}
/* When you mouse over the container, fade in the overlay icon*/
.container-main:hover .overlay {
opacity: 1;
}
/* The icon inside the overlay is positioned in the middle vertically and horizontally */
.icon {
color: white;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}`enter code here`
/* When you move the mouse over the icon, change color */
.fa-solid fa-eye:hover {
color: hsl(178, 100%, 50%);
}<div class="container-main">
<img class="nft" src="./images/GC.png" alt="nft">
<div class="overlay">
<a href="#" class="icon" title="view"></a>
<i class="fa-solid fa-eye"></i>
</div>
</div>