I used flex box and hover effect techniques for this project

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted over 2 years ago

  Hey, Edoye! 👋

  Regarding the hover effect on the Equilibrium image, I recommend improving it by making the following changes.

  • Wrap the image with an interactive element. You can use an anchor tag.
  • Keep in mind that any elements that have interactivity should be wrapped by interactive elements (e.g. a, button).
  • For your information, anchor tags are for navigation, while the button elements are for actions like opening a modal, submitting a form, toggling element, etc. It is essential to use the correct elements.
  • There's no need to put the word "Image" on the alternative text. The semantic meaning of the img element will make the assistive technologies pronounce it as an image.
  • Remove the entire overlay div.

  Then, to create the overlay, we use CSS.

  • First, create a pseudo-element from the anchor tag.
  • Make the pseudo-element fill the entire image.
  • Lastly, on hover (a:hover::before), add the cyan background color and the eye icon.
  • For the cyan background color, use hsla (or rgba) color format (just like you did).

  I hope this helps! Happy coding!

  12