Skip to content
Submitted about 2 years ago

NFT preview card component

Juan Ayala•170
@juan26468818
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello! Hope everyone is doing well.

I need to say that giving the color to the image in the hover gave me a hard time, even now that I managed to give the color, I know it's not 100% the color it should be, I would love if anyone could help me through this so I know what I'm doing wrong, and how can I improve it!

Community feedback

  • Agnar•220
    @agnar-nomadPosted about 2 years ago

    Hey, a couple notes: you should definitely increase the padding on the container (the card)

    make sure to style the price ETH text exactly as in the design

    Cover image on hover: use the same colour as is given for the fancy text, use cyan with opacity 0.5 I used the ::before and ::after pseudoelements to create that effect, but it might be easier to do it with another <div> inside your icon-view-container, making it position absolute and placing it above the nft image. A quick Google search should give you all needed.

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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