NFT preview card component (Flex)

Community feedback

• 

  Abdullah Ayoola•1,080

  @abdullah43577Posted about 2 years ago

  Hello there, it's really nice you took on this challenge. I can see that you're done with the implementation but you haven't figured out a way to implement the eye hover effect. Here are some tips that might help you: place the eye SVG icon in a div then, you will need to use the position absolute to position the element over the previous image. you can nest both images in the same container and give the container a position: relative; so that when you give the hover effect image the position: absolute; it positions absolutely to the container instead of the whole DOM.

  Then set it to display none;

  so on hover, you can now set it to display: block; for it to become visible once again. You can also check out my solution for this same challenge to see how I implemented mine. Let me know if you've got any other problems with your code. Happy Coding

  0

  ---

  

  J Z•290

  @half-ctoPosted about 2 years ago

  @abdullah43577 Thanks for your feedback, however your proposed solution is what I already have done. I was just wondering if there a "better" way to do it.

  0

  

  Abdullah Ayoola•1,080

  @abdullah43577Posted about 2 years ago

  @half-cto Ohh, I just found that you've actually implemented it already. I'd still like to add one more tip you might find helpful. you can add a transition to the hover image so it looks nice on hover. Great Job By The Way

  0