NFT Card component Solution / REMs, Overlay Image, Reset css.

Here a solution for my third challenge! ✌🏼

This one was quite simple, until I been struggled trying to do the image overlay, idk if there is a better way, feedback is all wellcome! 😃

HTML

<a class="nft-image-container" href="#">
	<img class="image-nft" src="./src/assets/image-equilibrium.jpg" alt="NFT Image" />
	<div class="image-overlay"><img src="./src/assets/icon-view.svg" alt="View Icon" /></div>
</a> 

CSS

.nft-image-container {
  position: relative;
}
.image-nft {
  border-radius: 1rem;
}
.image-overlay {
  background: var(--Cyan-hover);
  position: absolute;
  border-radius: 1rem;
  width: 27.7rem; /*I dont know if there is a better way to do this without specify a dimension*/
  height: 27.7rem; /*I dont know if there is a better way to do this without specify a dimension*/
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 120ms ease-in-out;
}
.image-overlay img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.nft-image-container:hover > .image-overlay {
  opacity: 1;
}

Greetings Coders!