NFT Page using HTML and CSS

Hey @yuuricrz, I hope you're doing great!

Here's how to do the image hover part using position:

• HTML:

<div class="image">
    <img
        class="img"
        src="images/image-equilibrium.jpg"
        alt="Equilibrium Image"
    />
    <div class="image-overlay">
        <img src="images/icon-view.svg" alt="Eye Icon" />
    </div>
</div>

• CSS:

main .image {
    position: relative;
}
main .image .img {
    display: block;
    max-width: 100%;
}
main .image .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 255, 247, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.5s;
    cursor: pointer;
    opacity: 0;
}
main .image .image-overlay:hover {
    opacity: 1;
}

I hope this was helpful. Here's my solution if you want to take a look: https://www.frontendmentor.io/solutions/nft-card-using-css-flexbox-WCOwgj9t9d

Keep up the great work!👏