NFT Page using HTML and CSS

Community feedback

• 

  Youssef Waleed•200

  @ywsolimanPosted about 2 years ago

  Hey @yuuricrz, I hope you're doing great!

  Here's how to do the image hover part using position:

  • HTML:

  <div class="image">
      <img
          class="img"
          src="images/image-equilibrium.jpg"
          alt="Equilibrium Image"
      />
      <div class="image-overlay">
          <img src="images/icon-view.svg" alt="Eye Icon" />
      </div>
  </div>
  

  • CSS:

  main .image {
      position: relative;
  }
  main .image .img {
      display: block;
      max-width: 100%;
  }
  main .image .image-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 255, 247, 0.3);
      display: flex;
      justify-content: center;
      align-items: center;
      transition-duration: 0.5s;
      cursor: pointer;
      opacity: 0;
  }
  main .image .image-overlay:hover {
      opacity: 1;
  }
  

  I hope this was helpful. Here's my solution if you want to take a look: https://www.frontendmentor.io/solutions/nft-card-using-css-flexbox-WCOwgj9t9d

  Keep up the great work!👏

  Marked as helpful

  0

  ---

  

  Yuri Cipriano Cruz•150

  @yuuricrzPosted about 2 years ago

  @ywsoliman Thanks!!

  0