NFT preview card component

Community feedback

• 

  Byron•2,290

  @byronbyronPosted over 2 years ago

  Hi @ujwalvinay

  You can put the overlay hover on the image by adding an image wrapper and using a pseudo element, something like:

  <div class="img-wrapper">
      <img src="images/image-equilibrium.jpg" alt="image" id="banner">
  </div>
  

  .img-wrapper {
      position: relative;
  }
  
  .img-wrapper::before {
      content: '';
      background: url('../images/icon-view.svg') center no-repeat hsla(178, 100%, 50%, 0.5);
      display: block;
      border-radius: 1.2rem;
      position: absolute;
      top: 0;
      right: 5%;
      bottom: 0;
      left: 5%;
      z-index: 100;
      visibility: hidden;
      opacity: 0;
      transition: visibility 0.3s, opacity 0.3s;
  }
  
  .img-wrapper:hover::before {
      visibility: visible;
      opacity: 1;
  }
  

  Hope that helps! 👍

  Marked as helpful

  2