This was a very good challenge for practicing flexbox and positioning, however I was a bit unprepared for the active states required. The view icon appearing when hovering over the image gave me quite some trouble, but I believe I have come up with a good solution. I tried two different ways, having the image be in the background or positioning the <div> with the icon over top of the image. I ended up positioning the elements over one another. I am unsure if this is the preferred way to go about this, but it seems to work just fine.
Once again, any feedback or useful tips are very appreciated!
@Claireb0125
Posted
Your solution seems to have worked out wonderfully!! I also had a issue with the hover element and icon but you seem to have a cleaner look so I will take your method into consideration for the future. The only advice I can give is the same that I received which is that I tend to rely on <div>'s far to often when other interactive sections exist like header/main/section/footer and such (which you did utilize some!) otherwise wonderful solution!!
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
