NFT Card Component

Replace the section tag <section> with the main tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

There is no need to give the body a width value. To center the section/main on the page using flexbox, replace the height in the body with min-height: 100vh.

For the overlay. give . preview-container a max-width of 100% a position relative, give . overlay position absolute, top, right ,left and bottom value of 0 background-color of cyan, opacity of 0. Give img:hover .overlay{ opacity: 0.9} and .overlay >img{ position: absolute; left: 50%, right: 50% transform: translate(-50%, -50%)}

.preview container{
position: relative;
max-width: 100%;
}
.overlay{
position: absolute;
top:0;
left: 0;
right:0;
bottom:0;
background-color: hsl(cyan);
opacity: 0;
}
.overlay >img{
 position: absolute; left: 50%, right: 50% transform: translate(-50%, -50%)}

 img:hover .overlay{ opacity: 0.9}

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hey Nikkehtine. I would suggest changing your background-color for the overlay to something like hsla(178.1, 100%, 50%, 0.5). You're missing the alpha value for your color. You can adjust the last value in the color code to adjust the transparency. Any value under 1 will give you a transparent effect.