Submitted almost 3 years ago

NFT preview card component solution. HTML, CSS

@Pseidu

A solution to the NFT preview card component challenge

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?

Code

Please log in to post a comment

Community feedback

Islam Soliman•440
@simokitkat
Posted almost 3 years ago
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

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