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 solution. HTML, CSS

Rafa 80

@Pseidu

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


Any feedback welcome. Particularly, I didn't know how to do the image's hover. Finally, I decided to use the background-image property, but the result is not exactly the one I wanted. How should I have done it?

Community feedback

P

@simokitkat

Posted

you could add an overlay empty div in the .img-container div and after that, you give the .img-container {position:relative} and the overlay div will be styled as { position:absolute; inset: 0; background-color: /* the hover color */; display: none;}

and upon hovering over the img-container the overlay div will be {display:block}

also you can give the eye icon {position:absolute;} and then give z-index of 2 or more to be over the overlay div after all.

I hope you find this helpful

Marked as helpful

1

Rafa 80

@Pseidu

Posted

@simokitkat Used your idea (well, not exactly) and now my proyect works as it should Thank you for your help!

0
P

@simokitkat

Posted

@Pseidu You're welcome.

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