NFT Preview Card Component

Solution retrospective
I struggled to find a way to overlay color on the image (on hover). I eventually used absolute positioning with an empty div(.overlay) and managed to make it work.
I also had some problems with the eye icon that would appear when hovering over the main image. Initially, I tried making the eye icon a child element of the empty div for overlay, but the eye icon would lose its color and become cloudy. So I had to get it out of that empty div and have it be positioned over the overlay using absolute positioning. Please let me know if you have any good ideas on how to fix this problem with the icon becoming cloudy
Also, I think the hovering effect of the image isn't working on the mobile version. I wonder why that is, since it seems to work fine on the desktop version. 🥲
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Soojeong'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