Responsive NFT preview card using grid

Hi! The way that i recommend for doing overlays is with either the ::after or ::before pseudoelement, here i did an example of a functional overlay for your card:

First of all, you will need to put your .nft image in a container, in this example i used a <div> container with the .overlay class:

<div class="overlay">
    <img src="/images/image-equilibrium.jpg" alt="NFT" class="nft">
 </div>

Then, you will need to make your ::after or ::before pseudoelement, in this case i used an ::after pseudoelement:

.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #ff000087;
  transform: translateX(100%);
  background-image: (Your eye icon here);
  transition: .3s;
  border-radius: 8px;
}

//You also need to put a overflow::hidden; property inside your .overlay class, thats because im using a transform: translateX; to hide the overlay

.overlay {
  position: relative;
  overflow: hidden;
}

And with that you're almost done! Now we just need to show the overlay when you hover the cursor on the image:

.overlay:hover::after {
  transform: translatex(0);
}

With this you will have a working overlay effect, you can customize it as you like of course. Hope that it helps!

PD: You should also add a display:block; property to your .nft image, this is to prevent a little gap between the parent container and the image