NFT-preview-card

Nice well done. Just a few tips

• You forgot to add the overlay and show it on hover
• You have flexbox on the body and you have margin on the container. You can remove the margin on the container, flexbox is already keeping the card in the middle of the page

Hi @OekPhlesym,

Congratulations on successfully completing the challenge, you did very well...

There is improvement room to make it closer to the given design. Which is appearance of the eye icon overlaying above the equilibrium image when hovering. You can set overlay component and make its absolute position, also set relative position of the image container.

Then insert it in HTML & CSS, the code snippet could be like this, you might adjust it as you like:

in HTML:

<div class="avatar">
    <img src="images/image-equilibrium.jpg" alt="preview">
    <img src="images/icon-view.svg" class="overlay" /> 
</div>

in CSS:

.avatar {
   display: flex;
   position: relative;
   justify-content: center;
   align-items: center;
   height: 60%;
   width: 100%;
}
.overlay{
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   opacity: 0;
}
.overlay: hover{
   opacity: 1;
   background: hsl(178, 100%, 50%, 0.5);
}

Hope that could be Helpful. Keep happy coding...