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 with just HTML and CSS

#airtable#bulma#storybook#vanilla-extract#backbone
Anthony 20

@guananthony

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


How did y'all get the view-icon to pop up on hover? Took me a while of googling..

Community feedback

Peter 170

@PeterJan285

Posted

put transition: 1s ease; on .card-img

Marked as helpful

0

Anthony 20

@guananthony

Posted

@PeterJan285 looks great, thanks for the tip

0

@GabrielReis11

Posted

Hey Anthony, i made another <div> on the image with the color and the icon view and set the opacity to 0. With hover just changed the opacity to 1 and icon appear with the cyane.

You can check my code on the github: https://github.com/GabrielReis11/NFT-preview-card-component

1

Anthony 20

@guananthony

Posted

@GabrielReis11 nice, thanks Gabriel

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