NFT preview card component using html and css only

Hello @ijyotimaurya150,

You can take an image element for the eye icon inside your nft-image div and position it using position: absolute;. Then you just need to make it's opacity 0 for normal state and 100% for hover state of the image.

Or you can take a completely different approach. And try to do it using CSS Pseduo Element. For example you can do it like this:

.nft-image {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.nft-image::before {
    content: url(images/icon-view.svg);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: hsla(178, 100%, 50%, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .5s ease;
}

.nft-image:hover::before {
    opacity: 1;
}

And for the ETH and days icon/text aligning, you can do it using flex. I don't know if there is any better way to do it. But I like to use flexbox to align icons with text. This is what I did for my solution:

HTML

<div class="card__info">
     <div>
       <img src="images/icon-ethereum.svg" alt="">
       <h2>0.041 ETH</h2>
     </div>
     <div>
       <img src="images/icon-clock.svg" alt="">
       <p>3 days left</p>
     </div>
</div>

CSS

.card__info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card__info>div {
    display: flex;
    align-items: center;
}

And you should make your card a little bit larger and the background color you used isn't the same as the original design.

I hope this helps.