Skip to content
Submitted 3 months ago

NFT preview card component solution with css only

Polariz625•220
@Polariz625
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What specific areas of your project would you like help with?

when hovering on the main image of the card, the overlay kind of overflows. someone can give some feedback on how to fix that? I already used overflow: hidden but didn't work :(

Code

Please log in to post a comment

Log in

Community feedback

  • web-dev-pasta•790
    @web-dev-pasta

    Great job! the overlay problem occurs because the <img> parent does not fit the image size you can overcome this by setting the parent display into inline-block and the img display will be set to block so it can be like this:

    .nft-card-main-img {
  display: inline-block;
}

.nft-card-main-img img {
  display: block;
}

    I hope that helped!, Happy Coding!!🌹

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord