Skip to content
Submitted over 3 years ago

NFT preview card using HTML and CSS

airaciv•60
@airaciv
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello, this is my first challenge from this website to practice my HTML and CSS. Feedback and comments are also welcome. One question that I have about this preview card is about the hover state of the card image. I would like to have the view-icon to have higher opacity like how it was shown in the design. I've tried several methods, even looking through other solution, but I'm still confused on how they do it unless I copy paste the whole thing. I've tried using another div to contain the view-icon and use lower opacity for those container, while using opacity 1 for the view-icon but it still doesn't work for me. Increasing the z-index of the view-icon, in this case, also doesn't work. Either it really doesn't work this way or I'm coding it wrong. If anyone could please kindly explain it to me, I will be very thankful!

Code

Please log in to post a comment

Log in

Community feedback

  • Naveen Gumaste•10,420
    @NaveenGumaste

    Hello airaciv ! Congo 👏 on completing this challenge

    Let's look at some of your issues, shall we:

    • Add the font-weight to the "Eth" 0.41.

    happy Coding😀

    Marked as helpful
  • Abdul•8,560
    @Samadeen

    Hello! Cheers on Completing this challenge . You can use margin-top to push down your a little bit down.. Regardless you did very well . Happy Coding!!

  • imad•3,330
    @imadvv

    hey @airaciv , I take look at your code, and for the issue that you have is because you need to add hover to both ('.view-icon', and ' , '.equilibrium-img') classes from the card-image class, I well submit a pull request to your repository if you want me to help you.

  • airaciv•60
    @airaciv

    So after more browsing of the other solutions and do more research, I found that I can change the opacity of only the background-color of the view-icon by using RGBA value instead of HSL. I've fixed this part of my code. Other feedback and comment are always welcome!

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