Submitted over 3 years ago

NFT Preview Card

@MarioLisbona

A solution to the NFT preview card component challenge

Solution retrospective

I struggled with the hero-image overlay. I would love some tips on best practice for this. I initially used an ::after element and transform:translate to position it correctly. This however wouldn't allow me to have lower opacity on the background colour and full opacity on the image.

I tried a few over ways..created a div and image with 0 opacity and had a hover state of 0.5 for the overlay colour and opacity of 1 for the image but this still didn't work. I left it after doing a-lot of research and will ask for some tips

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Mario Lisbona'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