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

Sam Kikoma 140

@Sam-Kikoma

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


The overlay on the image on hover was a bit tricky. I couldn't get it to fully match the provided preview. Otherwise I had a lot of fun working on this.

Community feedback

@dostonnabotov

Posted

Hi, there. You can add an eye icon and background-color, using pseudo-elements. For example, in .card::before, you add background-color, and in .card::after, you add your icon as background-image. You have to make sure that both are set their opacity to 0. When hovered, in .card:hover::before and .card:hover::after, you add opacity to make it visible. You can view my solution as well if you want where I used this strategy.

Marked as helpful

0

@AditNovadianto

Posted

Wow... good job @@Sam-Kikoma you did this project so good and perfectly and didn't have any issues there!!!

keep it up and happy coding ☕

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