nft-preview-card

Community feedback

• 

  Bryan Li•3,530

  @Zy8712Posted 12 months ago

  In order to add the active hover state you need to add a "curtain" over your image for it to work. What I did was something along the lines of:

  For the HTML:

  <div class="image-div">
     <img src="./images/image-equilibrium.jpg">
     <div class="curtain"></div>
     <img src="./images/icon-view.svg" alt="" class="curtain-icon">
  </div>
  

  For the CSS:

  .image-div img {
     max-width: 100%;
     height: auto;
     display: block;
  }
  
  .curtain {
     background-color: var(--Cyan);
     width: 100%;
     height: 100%;
     position: absolute;
     opacity: 0%;
     transition: opacity 0.25s;
  }
  
  .img-div:hover .curtain {
     opacity: 50%;
  }
  
  .curtain-icon {
     position: absolute;
     inset: 0;
     margin: auto;
     opacity: 0%;
     transition: opacity 0.25s;
  }
  
  .img-container:hover > a > .view-img {
     opacity: 100%;
  }
  

  This is mainly done using the :hover effect. Most of this css is just setting up the curtain's appearance. Hope you find this useful 👍

  Marked as helpful

  0

  ---

  

  Tee-Ds•80

  @Tee-DsPosted 12 months ago

  @Zy8712 Thanks a lot Figured out the problem with my code was u was trying to use diplay:none; and visibility:hidden; rather than opacity:0;

  0