Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT PREVIEW CARD

@Pallavi2908

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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?

Community feedback

@LuisJimenez19

Posted

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

0

@Pallavi2908

Posted

@LuisJimenez19 I see,thank you!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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