NFT Card

Community feedback

• 

  Goran Malić•260

  @floatingPebblePosted over 1 year ago

  Hey, excellent work!

  For the NFT on hover issue, you can try my solution. First, give your NFT container position: relative. Then add the container with the "eye" image inside it. That new container should have position: absolute and opacity: 0, stretch it to match the outer container so it will match the NFT image in size. Now you can change its opacity to 1 and set the background color when you hover over it. Here is my solution:

  https://github.com/floatingPebble/floatingPebble.nft-preview-card-component-FM.io

  Let me know if I can help with something. Cheers!

  1

  ---

  

  golfingtrex•270

  @golfingtrexPosted over 1 year ago

  @floatingPebble I see, so you basically made two images on top of each other with the overlay having opacity 0 by default and doing a transition on the opacity on mouse pointer hover. Is that correct? Also, I see you use <figure> elements to hold the two images as opposed to <div> elements with a class or data attribute. Is that for semantic purposes or some other reason? Thank you for your reply and solution.

  1

  

  Goran Malić•260

  @floatingPebblePosted over 1 year ago

  @golfingtrex

  Yes, to all of those assumptions. We should avoid using generic <div> tags when possible.

  Happy coding!

  0