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

Mobile First NFT preview card using only HTML and CSS

@J-HernandezM

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


What did you find difficult while building the project?

The thing i found the most difficult was to hide and show the eye image on top of the NFT main image, at first i tried to figure out by myself but had to look up for a css propertie that could help me. I found the CSS propertie vissibility that help me, also i had to combine in the same CSS rule the selector of the container with a hover and the eye image inside of it so that way i can make it appear again when i hover it

Do you have any questions about best practices?

How could i have done the show/hide feature better with only CSS and HTML? i made it using :

.eye{visibility:hidden}
.container:hover img{visibility:visible}

Community feedback

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