Skip to content
Submitted almost 2 years ago

NFT Preview Card using HTML&CSS

Ronaldo Kashari•40
@RonaldoKashari
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

Making the icon appear on top of the photo with a cyan background and with a slight transparency really turned out to be way more difficult than I thought, could I have done it in a better way than this?

Community feedback

  • dragi-ns•270
    @dragi-nsPosted almost 2 years ago

    Hi, looks good! I also just finished this challenge.

    For the hover effect I have used ::before and ::after pseudo-elements. You can put a slightly transparent background color on ::before and you can put a background image on ::after, after that you can show them on hover. That's how I did it.

    Hope this helps!

    Marked as helpful
    1

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