NFT card - Hover effect, Flexbox

Community feedback

• 

  Venus•1,790

  @VenusY

  Posted over 1 year ago

  Well done on completing this challenge!

  I saw that you fixed the issue with the view icon by adding padding: 7rem to .overlay-icon.

  While this works on larger screen sizes, if you shrink the viewport's width enough, I found that you start running into overflow issues because the padding + width of the view icon won't fit within the card.

  The initial cause of your issue with the view icon was this bit of code here:

  .nft img {
    width: 100%;
  }
  

  This combinator selects every descendant img element of .nft, including those that aren't direct children.

  In your case, this includes the view icon, which means the width of the view icon was set to 100% as well.

  To fix this, you can make one small change:

  .nft > img {
    width: 100%;
  }
  

  This ensures that you're only selecting direct children of the .nft element.

  You can now remove padding: 7rem from .overlay-icon.

  After doing so, you'll find that you run into the problem of the overlay no longer spanning the entire height of the NFT image.

  You can fix this by simply adding height: 100% to .overlay.

  Finally, you can add display: block to the NFT image to remove that small bit of whitespace underneath the image that you may have noticed.

  Other than that, well done once again for completing this challenge! You did a great job at replicating the design.

  Hope this has been helpful! :)

  20

  Marked as helpful
• 

  John•410

  @MiyaoCat

  Posted over 1 year ago

  Thank you so much! That was incredibly helpful! I was wondering why the .overlay was appearing so big.

  Do you know why the bit of whitespace appears at the bottom if I don't do display: block to the NFT image?

  11