Responsive NFT preview card using grid

Community feedback

• 

  Eduardo•910

  @KTrick01Posted about 2 years ago

  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

  0