Skip to content
Submitted almost 2 years ago

NFT PREVIEW CARD

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

Solution retrospective

  • I found difficulty while trying to create the multi-layered shadows for the main card component. How can it be done easily?
  • On the hover effect,the opacity of the eye-icon is also affected,is there a way to make it's opacity stay 1 throughout,and only the background change with hover?
Code

Please log in to post a comment

Log in

Community feedback

  • Luis Jimenez•760
    @LuisJimenez19

    Hello, congratulations on completing the challenge.

    If you want the icon to not be affected by the opacity you can use a gradient, like this:

    .icon { background: radial-gradient(circle, rgba(0,0,0,0.3701855742296919) 28%, rgba(0,255,247,1) 84%) }

    And .icon:hover { opacity: 1; cursor: pointer; }

    You can adjust it to your liking.

    I hope my contribution is helpful.

    See you👋🏽

    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