@floatingPebble
Posted
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!
@golfingtrex
Posted
@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.
@floatingPebble
Posted
@golfingtrex
Yes, to all of those assumptions. We should avoid using generic <div> tags when possible.
Happy coding!
