It took me sometime to do it, I used HTML, CSS

Hello Omar!! Nice work on completing this challenge. You really did a great job, especially on the layout. Looking at your solution, i will like to suggest the following to help improve it:

• add a div with a class of overlay in your image container(the one with a class of img) and add the icon-view.svg image inside of it.

<div class="img">
    <img src="./images/image-equilibrium.jpg" alt="image-equilibrium" class="img-1">
    <div class="overlay">
      <img src="./images/icon-view.svg" alt="">
    </div>
  </div>

• add position: relative and align-items: center to your div with class "img" in your style.css file:

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

• add the following styles to your overlay:

.overlay {
  height: 300px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 20px;
  opacity: 0;
}
.overlay:hover {
  cursor: pointer;
  background-color: hsl(178, 100%, 50%, 0.4);
  opacity: 1;
}

• add the following styles to your h1 and strong tag(the one with the white class):

.white:hover {
  cursor: pointer;
}