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

Responisive NFT Preview Card

@Gerald-LeCour

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


Thanks to @Bruno-Pinho for helping me figure out how to apply the gradient over the equilibruim image when you hover over it.

Community feedback

@pinhob

Posted

Hey, Gerald! Cool solution for the challenge so far! 🙂

The hover gradient and icon were tricky for me too - I spend a lot of time trying to find a solution and need to see how other people did at the end to create my own.

But one way to solve it is using the pseudo-elements ::before or ::after in your image container. If you want to have an idea, I found this codepen helpful to have a grasp of how to do it. Outside the gradient part, for the icon being centered, I used flexbox.

I'm not 100% sure that my solution is the best approach, but if you want to check it out, you can see my code here. I highlighted the important part for you.

And good coding for you, man! 🚀

Marked as helpful

1

@Gerald-LeCour

Posted

@pinhob Thank you so much for your help, I understand how to do it now, and will update this solution!

1

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