Design comparison
Solution retrospective
Feedback welcomed!
This one was a bit tricky to figure out how to do the overlay on the image. Googled a little bit, found on tailwind about the 'group' class which you can tie to a parent and then the children can be styled depending on the state of the parent by using group-[modifier] so in my case i used group-hover: utility to control the opacity of the div that holds the SVG and cyan background. If the parent is not hovered, the svg+background has opacity-0. If it is hovered, then the div has opacity-100.
The only thing is that i had to make another custom color in this scenario where the background cyan color is hsla to control the alpha opacity directly like that.
Pretty cool solution although not sure if ideal, but i learned something new!
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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