NFT Preview Card Component - Using CSS Flexbox

Hi Ghaffar,

To show the icon with the image when hovering on the image, you want to have a container for your image first that contains your image and also an overlay <div> like this, and within the overlay, you'll have your icon:

<div class="card__image">
   <img src="./images/image-equilibrium.jpg" alt="Equilibrium, a multicolor cube" />
   <div class="overlay">
      <img src="./images/icon-view.svg" alt="" class="">
   </div>
</div>

The overlay needs a position:absolute (which means the parent container also will need position:relative added). The CSS for the overlay can look something like this:

.card__image {
  position: relative;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: hsla(178deg, 100%, 50%, 0.5);
  opacity: 0;
  display: grid;
  place-content: center;
  transition: opacity 200ms ease-in-out;
}
.overlay img {
  width: 3rem;
  height: 2rem;
}
.overlay:hover {
  opacity: 1;
}

My solution is here if you want to check it out. Good luck!

Great work. Can you explain your question?