Responsive landing page; Html5 and Css3

Hey Miguel,

I did it with absolute positioning. I made a quick adjustment for your code, it isn't perfect but close, might give you the idea. Problem here is the eye icon also transparent, which i couldn't fix. Lucky for me, i did this challenge to try tailwind css, in tailwind there is a easy fix for this problem but i don't know how in normal css.

<div class="nft">
  <img
    id="image-nft"
    src="assets/images/image-equilibrium.jpg"
    alt="Imagem da NFT equilibrium (Cubo na diagonal)"
  />
  <div class="icon-div">
    <img src="assets/images/icon-view.svg" class="icon" />
  </div>
</div>

.nft {
  position: relative;
}

.icon {
  position: absolute;
  transform: translate(-50%, 250%);
}

.icon-div {
  background-color: cyan;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.icon-div:hover {
  display: block;
  cursor: pointer;
  opacity: 0.3;
}