NFT Preview Card using Grid, flex and Position

What I learned

I learned to place a png image (an avatar) beside a text, in earlier projects I implemented the SVG image placement behind the text. In this project, I also learned about the Overlay Image.

An overlay image is an image that is on the top of one image and in this project I have implemented it for the hover effect using position: relative at parent div and postion: absolute , display: flex(justify-item: center, allign-item: center) at overlay-active div(child div)

Below are the HTML and CSS for both "Overlay Image" and Avatar , see below:

<picture class="product__img card__overlay">
      <img class="overlay__img" src="./images/image-equilibrium.jpg" alt="">
      <div class="overlay__active">
        <img src="./images/icon-view.svg" alt="Icon View">
      </div>
    </picture>
<footer class="product__footer">
      <img class="avatar" src="./images/image-avatar.png" alt="avatar">
      <p class="created_by">Creation of <span class="creator__name">Jules Wyvern</span></p>
    </footer>

/*  Overlay Imagge  */

.card__overlay{
  position: relative;
}

.overlay__img{
   border-radius: 0.5rem;
}

.overlay__active{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}

.card__overlay:hover .overlay__active{
  background-color: var(--clr-cyan-transparent);
  opacity: 1;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 0.5rem;
}


/* Avatar and Footer */

.product__footer{
  display: flex;
  padding: 1rem 1rem 0 0;
  gap: 1rem;
  align-items: center;
}

.avatar{
  vertical-align: middle;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  border: 2px solid var(--clr-white);
}

`

Feedback for enhancement and my frontend journey ahead is most welcome.

Best Regards, Shashi