Solution to NFT preview card component

Community feedback

• 

  Youssef Waleed•200

  @ywsolimanPosted about 2 years ago

  Hey @Nikola-Mitic, 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

  1

  ---

  

  Nikola•30

  @Nikola-MiticPosted about 2 years ago

  @ywsoliman Thank you

  0
• 

  P

  Justin Green•2,770

  @jgreen721Posted about 2 years ago

  Nice work on the challenge. Looks like you nailed the size pretty well. I think for exact dimensions on the projects, you get that thru the figma files that come with a paid membership. I might be wrong but thats my guess as of now. lol.

  As far as the hovering effect, if you put a div container around your image and give it a position of relative than you can put an overlay div with a position of absolute(so it wont mess up your NFT image placement) in there that you can have initially set to an opacity:0 and assign a CSS hover event in which you increase the opacity.

  <div class="img-div"> 
  <div class="overlay">
  /* put the eye image */
  </div>
  <img src="#"/>.   -- your NFT main image
  </div>
  

  Hopefully that kind of makes sense. lol. But ya, nice work on everything else!

  Marked as helpful

  1

  ---

  

  Nikola•30

  @Nikola-MiticPosted about 2 years ago

  @jgreen721 Thank you

  0