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 Component w/ FlexBox

@KoiHast

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


It took me forever to figure out how to do the hover effect with the icon over the main image. I probably did it in a really goofy way. If there's a better way for me to have done it, please let me know!

Also, I know the hover effect isn't showing the same border-radius as the image. It's in my CSS code, but for some reason, GitHub isn't wanting to see it when I deploy the site. Just know that it is there! GitHub just hates me.

Thank you! <3

Community feedback

@Mouradis

Posted

i havent made this project yet but i made a simular one i also struggled with thomething simular my solution was to put the main image as a background and above you can add the blue box with low opacity and the eye icon and make them display: none; and in the hover proprety i make them display: flex; with a little transition

Marked as helpful

0

@KoiHast

Posted

@Mouradis Thank you! I tried attempting something similar, but for some reason it wasn’t working. I may have just been using one of the properties wrong.

0

@KoiHast

Posted

Nevermind! It's recognizing the border-radius now :)

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