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

CSS Javascript

@BMcdavitt

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


I am curious to see what others did to create the hover effect on the image.

Community feedback

imad 3,310

@imadbg01

Posted

Greeting Bill McDavitt!! Congratulations for completing your challenge!, 👏👏👏.

for the hover effect, they're a lot of ways to archive it, for me personally I found using two spared element, one for the image and one as pseudo-elements, that way I can apply two different transition and I can archive a smooth animation.

but if you curious about the best solution so far, lucas create this awesome nft-preview-card-vanilla-css-custom-design-and-hover-effects you check out and am sure that you will get a lot of inspiration from it.

overall, happy coding, and have a great day

Marked as helpful

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