Solution to NFT preview card component

Hey @Nikola-Mitic, 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!👏

Nice work on the challenge. Looks like you nailed the size pretty well. I think for exact dimensions on the projects, you get that thru the figma files that come with a paid membership. I might be wrong but thats my guess as of now. lol.

As far as the hovering effect, if you put a div container around your image and give it a position of relative than you can put an overlay div with a position of absolute(so it wont mess up your NFT image placement) in there that you can have initially set to an opacity:0 and assign a CSS hover event in which you increase the opacity.

<div class="img-div"> 
<div class="overlay">
/* put the eye image */
</div>
<img src="#"/>.   -- your NFT main image
</div>

Hopefully that kind of makes sense. lol. But ya, nice work on everything else!