NFT Preview Card

Community feedback

• 

  Macdeesh•610

  @macdeeshPosted over 2 years ago

  Just a few things to add to what @mohamed-benoughidene said :

  1- I would recommend wrapping the Equilibrium or the NFT image with an anchor tag. Every place you see a hover style, you need to include an interactive element, like an anchor tag or button.

  2- I would do the hover effect on this using pseudo-elements like ::before or ::after rather than adding extra in the HTML. But that's not essential. Also, for the other SVG icons you can use pseudo-elements in CSS as the icons are all decorative.

  Marked as helpful

  1

  ---

  

  t-rieu•20

  @t-rieuPosted over 2 years ago

  @macdeesh Noted, thanks for the advice!

  0
• 

  Mohamed•270

  @mohamed-benoughidenePosted over 2 years ago

  hello t-rieu✌

  -first I noticed that you used 3 identical properties witch is display in the class named overlay line 26,28,31 you can write it ones because only the last one will apply in your case display: flex;.

  -for the overlay I used a different approach instead of wrapping only the svg inside a div i wrapped both the card img and the overlay div containing the svg inside one div.

  -for the overlay style i didn't use display: flex; like you did instead I did this background cyan , position absolute opacity 0, z-index 99, top: 0, left: 0, on hover state just opacity 1.

  • you can check my solution for that just head to my profile. I hope you find my answer helpful if so please upvote me and mark it as helpful.

  Marked as helpful

  1

  ---

  

  t-rieu•20

  @t-rieuPosted over 2 years ago

  @mohamed-benoughidene Thanks for pointing out the three identical properties, I must have overlooked them. And, thanks for letting me know how you approached the SVG and img, it is helpful!

  0