@vanzasetia
Posted
Hi, Joel Leon! 👋
Before taking care of the hover effect, I recommend getting the HTML right first by wrapping the Equilibrium image with an anchor tag. It has interactivity, so it should be wrapped by an interactive element.
Now for the hover effect, I recommend using a pseudo-element and background properties. So, there is no HTML markup for the overlay and the eye icon.
You can start by creating the pseudo-element from the anchor tag. Then, use the pseudo-element to show eye icon by using background-image and background-position. For the background color, use rgba or hsla to control the opacity of the color.
For your reference, you can see @IlnaraAckermann's solution.
Frontend Mentor | Css3, HTML5, flexbox, pseudo-class and pseudo-elements coding challenge solution
I hope this helps. Happy coding!
