@vanzasetia
Posted
Hi, @brunokzz! 👋
Creating the overlay for the Equilibrium is the hardest part of this challenge. I agree with that.
I recommend getting the HTML right first for the Equilibrium image.
- The image should be wrapped by an interactive element such as an anchor tag. All elements that have interactivity should be wrapped interactive elements.
- The alternative text of the image should be telling the purpose of the link. For example, with the
href="images/image-equilibrium.jpg"
for the<a>
, the alternative text can be "Preview the Equilibrium".
Then, to create the overlay, you need to use a pseudo-element from the <a>
and background
properties. Use, background-image
to show the eye icon. Then, use background-color
with rgba
or hsla
format to control the opacity of the background color.
I hope this helps. Happy coding! 😄