Skip to content
Submitted over 3 years ago

NFT card component using flexbox and pseudo classes

Mohammad Ebrahimi•250
@moheb2000
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I reduced opacity for cyan active state of image. I want to set full opacity for eye viewer in center of image but I can't. Any advice?

Code

Please log in to post a comment

Log in

Community feedback

  • Mubeen Shaikh•160
    @MubeenAhmadShaikh

    Good work MOHAMMAD EBRAHIMI,

    You can add your svg icon z-index of 2 it will be then displayed on top

    Hope this helps you :)

    Marked as helpful
  • Account deleted

    Hi there 👋

    Congratulate on finishing your project 🎉. You did a great job 💡

    I give some suggestions to help you take your project design to the next level 📈😉

    • I think you should center the card so to do this add code below to body in CSS
    min-height: 100vh;
display: grid;
place-items: center;
    • About your question: remove the opecity from .card__cover__hover, instead, change its background to background: hsl(178deg 100% 50% / 50%);

    Happy coding ☕

    Maqsud

    Marked as helpful
  • Hexer•3,620
    @EmmanuelHexer

    Great work overall man. Keep it up

    Marked as helpful

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