Skip to content
Submitted over 3 years ago

NFT Card with some Flex

Wild_Tsunami•120
@WildTsunami
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I didn't know how to make the :hover with the top image, but otherwise it was pretty simple.

Still taking advices of course, I'm a begginer and want to improve :)

Code

Please log in to post a comment

Log in

Community feedback

  • Martin Eliáš•890
    @martinelias1312

    Hello @WildTsunami, look at my solution how i have done it. I started with the variable cyan color and changed its opacity to 50%. (:root section).

    One more suggestion:

    • alternate text can be left blank if images are only decorative, like icons of ethereum or clock.

    If you have any questions and don´t understand something from my code, feel free to ask!

    Marked as helpful
  • Saran•460
    @Saran-73

    Hi ,you can do that by creating a div with same image size create(:before) pseudo element give it backround color then centre the icon inside then make it position absolute to place it above the img and use the opacity and z- index property. To understand about not affecting the opacity of the icon take a look at my project and a video by (coder coder)for which I have the link in my GitHub readme file.

    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