Skip to content
Submitted almost 3 years ago

NTF Preview Card | HTML CSS

Nick•40
@FrontEndNick2022
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

Please can someone help me correct the main image? As you can see the border-radius is thrown out, so doesn't show correctly. I believe this is because of the position relatives used to get the hover effect. When applied, they seem to push somehting I've done out of alignment.

I've looked at a few of the solutions on here and it seems everyone has a different way of going about it. With the way I mocked up the HTML, is it possible to correct the issue in the CSS?

I spent 5+ hours on this and redone my code entirely trying to fix it, and still couldn't get it :)

Any guidance on that and anything else would be much appreciated.

Community feedback

  • Sajana Wijesinghe•460
    @StormKing969Posted almost 3 years ago

    Hi

    The reason why your border-radius isn't working is because that border belongs to the nft image. The quickest way to fix it is to:

    • Give the img tag within "card-img-holder" a border radius of 1.5rem (i.e the nft image)
    • Modify the height to 99% in "card-img-overlay" tag
    • Add a border radius of 1.5rem to "card-img-overlay" tag

    Hope that helps

    Marked as helpful
    1
    Nick•40
    @FrontEndNick2022Posted almost 3 years ago

    @StormKing969 Thank you for the tips, this seems to have fixed the issues nicely.

    0
  • Rio Cantre•9,690
    @RioCantrePosted almost 3 years ago

    Hello there! Awesome job with this one. Viewing your solution, I would suggest the following for you...

    • Add border-radius: 10px; in the img rule set
    • Add margin: 6rem 0; in the .card rule set to align it in the center

    Hope this helps and Keep up the good work!

    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