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 Component

Luyanda 40

@lmaqungo

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


What is the best method of adding that background shadow effect that is behind the main NFT card? I struggled to replicate that so I just used the CSS box shadow property I also struggled with implementing the hover state for the actual NFT image(the cube). The brief design had a cyan overlay with an icon showing for the hover state. I just resorted to using the box shadow again. If anyone knows how to do that, your advice would be appreciated.

Community feedback

Mohamed 270

@mohamed-benoughidene

Posted

Hello Luyanda 👋

-For your question What is the best method of adding that background shadow effect that is behind the main NFT card I really think that you are already in the best solution.

-and for your question about the hover state you can do that by creating a div that's gonna contain your card image and a div(containing the svg) that gonna have a style of background cyan (use hsla colors), position absolute opacity 0, z-index 99, top: 0, left: 0, then add a hover state that gonna make the opacity 1.

-you can check my solution for that just head to my profile.

-I hope you find my answer helpful if so please upvote me and mark it as helpful.

1

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