@vanzasetia
Posted
Hello, George! 👋
Nice work on this challenge! 🙌 Your solution is responsive and looks great! 👍
Regarding your questions, I would recommend re-creating the overlay using pure CSS by following these steps.
- First, wrap the Equilibrium with an anchor tag. It's important for any interactive elements to be wrapped by interactive elements (
a
,button
, and a lot more). - Second, the alternative text of the Equilibrium is now a text content or label for the anchor tag. So, I suggest an alternative text that tells the user what is going to happen after the user clicks the image. I'm going to tell the user that it is going to allow the user to view the image so, the alternative text would be View Equilibrium and the
href
is pointing to the image file. - Third, remove the overlay div and the
img
tag for the eye icon. - Finally, use the pseudo-element and background properties to show both the eye icon and the cyan background when the image gets hovered.
I know that this is not answering the questions however by doing this, the HTML looks a bit cleaner and it still has the same result but with less markup. 😉
Hope this helps. Keep up the great work! 👍
Marked as helpful