NFT Card Preview using Flexbox

Hello everyone!

This is my solution for the challenge, I felt that I did a good job. The hardest part for me was to do the hover effect with the eye icon. I found a solution on Youtube which I used. In that video they applied the :hover selector on the father element instead of the element I wanted to apply it to. It worked perfectly but I don't know why it works that way.

This is the HTML:

       <div class="card-img">
          <img
            src="./nft-preview-card-component-main/images/image-equilibrium.jpg"
          />
        
        <div class="img-overlay">
          <img
            src="./nft-preview-card-component-main/images/icon-view.svg"
            alt=""
          />
        </div>
        </div>

And the CSS:

.img-overlay{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: hsla(178, 100%, 50%, 0.5);
  opacity: 0;
}

.card-img:hover .img-overlay{
  opacity: 1;
  cursor: pointer;
  transition: all ease-in-out 0.3s;
}

Anyway, Happy coding! :)