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

Nothing special

@arslan1070

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 got stuck when trying to make an overlay text and change the color when hovered. And still it's confusing for me so if anyone have a better way to it, please let me know. Thank you!

Community feedback

Mark Cates 110

@mscates

Posted

have you looked at your solution on the web yet? the image is off center. what you can do is change the background-size to contain and add background-repeat: no-repeat and it will be centered. then change your padding to 9vh 0 and it will look better. I would also look into just using the img tag instead of the background image. might be an easier solution for you. also, you asked about the hover and you can do this with mix-blend-mode to easily do the hover action. hope his helps.

1

@arslan1070

Posted

@mscates thank you for this detailed answer.

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