Skip to content
Submitted about 2 years ago

NFT Card Hover Overlay Using Vanilla CSS Pseudo-elements

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

Solution retrospective

I'm not sure if I was supposed to hardcode the width & height values of the different sections of the card.

My Questions

  • Was my :hover overlay the best practice in the industry?

  • How do I automatically size the ::after element's background to match the original element with 100% accuracy?

  • Is it best practice to use background-size: contain for SVG images?

  • How do I recolor SVGs using CSS without using CSS masks or editing the .svg path directly?

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Luzefiru's solution.

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