Design comparison
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. 🥲
Community feedback
- @DilinyerCRPosted over 2 years ago
Hello, I think you did it well, I struggled too but I find a simple way, I just use background-color: hsl(178, 100%, 50%, 50%) for the hover instead of hsl(178, 100%, 50%), I put the opacity inside of the background color. Happy coding!
Marked as helpful1@kongguksuPosted over 2 years ago@DilinyerCR Thanks! I think there are some properties that I haven't learned yet like the root property, but I'll definitely try this as I learn more 😄
1
Please log in to post a comment
Log in with GitHub
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