NFT preview card component

Overlay I didn't know how to create an overlay to an image, this is the approach that I took.

Since this was a link I used a <a> tag as a container, because I thought when you click at the image it will take you to another page with more details of this NFT.

  <a href="#" class="card__url-container">
    <img
      src="./images/image-equilibrium.jpg"
      alt="A transparent cube balanced in one of its corners in a dark blue background promoting balance and calm"
      width="604"
      height="604"
      class="card__img"
    />
    <div class="overlay">
      <img src="./images/icon-view.svg" alt="" aria-hidden="true" />
    </div>
  </a>

.card__img {
  border-radius: 0.5rem;
}

.card__url-container {
  position: relative;
}

.overlay {
  position: absolute;
  background-color: var(--clr-primary-500);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  opacity: 0;
  transition: 0.4s ease;
}

.card__url-container:hover .overlay {
  opacity: 1;
  background-color: var(--clr-primary-500-op);
}