Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT Preview card

@BryanCarlos

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


The only thing I messed up it's when the nft image get the :hover status. If you hover over the view icon it keeps "shaking".

If you know how to solve this, I would be so grateful to get your soluction.

Community feedback

nirglus 270

@nirglus

Posted

Hey congratulations for completing the challenge!

In order to fix the :hover problem, try to seperate the image divs. Make one for the image, also use background-image instead of <img> element for the Equilibrium image. Then in the image div, add the div of the eye and set a background color to it. Make the div the same width and height as the parent div, and change the opacity to 0. After that, set the opacity to 1 on hover and it should work.

Keep up the good work :)

Marked as helpful

2

@mohammed-sarhad-ahmed

Posted

Check my solution to solve your problem.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord