NFT Preview card component

Hello, somnath 👋

Good work on finishing this challenge! i have a few suggestions i think can help.

For the image hover effect i think you should try something like this, for the html

   <figure class="container">
      <span class="image_cover"></span>
      <img class="child-1" src="./images/image-equilibrium.jpg" alt="nft">
      <figcaption class="heading">
        <a href="#"> Equilibrium #3429</a>
      </figcaption>
    </figure>

As long as the image element and the figcaption element is wrapped in the same container, it will be easier when styling to target any of the child's element for the hover effect.

.container {
  position: relative;
}
.container:hover a {
  color: #00FFF8;
}
.child-1,
.image_cover {
  opacity: 1;
  width: 100%;
  height: 200px;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
.container:hover .image_cover {
  position: absolute;
  z-index: 2;
  background-color: rgba(0, 255,  248,  .5);
}

And also, i think you should check out 👉 semantic html

Well that's it, nice work again! i hope this helps.