NFT Preview Card

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.

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.