NFT preview card component (Flexbox)

Community feedback

• 

  milley•70

  @milley69Posted almost 2 years ago

  Hi, next time don't give up, it's better to sit once again, but find a way :) In short, I have slightly supplemented your code for an example so that you can figure it out a little. I understand that there is most likely a better version of this hover effect, but still...

  HTML

  <div class="nft-main-img">
  <a href="#"><img class="main-img" src="./images/image-equilibrium.jpg" alt="New's Nft Equilibrium Image"/></a>
  </div>
  

  CSS

  .nft-main-img a {
      position: relative;
  }
  .nft-main-img a::after{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--cyan);
      opacity: 0;
      transition: opacity .3s ease;
  }
  .nft-main-img a::before{
      content: url("images/icon-view.svg");
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      z-index: 1;
      opacity: 0;
      transition: opacity .3s ease;
  }
  .nft-main-img a:hover::after{
      opacity: .3;
  }
  .nft-main-img a:hover::before{
      opacity: 1;
  }
  

  Good luck to you

  Marked as helpful

  1