html and css

Community feedback

• 

  Joseph Maramba Weyao•195

  @mamba-dev-KEPosted over 2 years ago

  Hey, good job on this. The easiest way for me is using pseudo-elements i.e. ::after. I will share a code pen to an example.

  0
• 

  Jibreel•300

  @jibreel1Posted over 2 years ago

  Nice design here, prince.

  For the eye icon overlay in the image, you can add a pseudo element on the image, the equilibrium image (::after or ::before). After that, set the opacity of the eye icon to zero(0). Then, in the hover of the pseudo element (the eye icon), set the the opacity to one(1). With these, when you hover on the image, the eye icon will display.

  .icon{ background-image: the equilibrium image; } .icon::after{ background-image: the eye icon; opacity: 0; }

  .icon: hover ::after{ opacity: 1; }

  Read more on pseudo elements to get a clearer understanding of this explanation. Is it well understood??

  0