Skip to content
Submitted 6 months ago

NFT-preview-card-hannibal

Rupak Mukherjee•1,070
@hannibal1631
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

This time i took almost no help from google and solved it on my own.

What challenges did you encounter, and how did you overcome them?

I faced challenge while giving the image the hover effect. So for this time, i didn't put it there. I'll upload the updated version with the hover effect later, cause i don't want to copy anyone.

What specific areas of your project would you like help with?

Any suggestions on the hover effect will be really great.

Community feedback

  • Koda👹•3,830
    @kodan96Posted 6 months ago

    hi there! 👋

    You can put a div inside your .card with the eye icon within it and use it as an overlay:

    .overlay {
  position: absolute;
  top: 0;
  left 0; 
  height: 100%;
  width: 100%;
}

    and also make it a flex container, so you can position the icon in the middle.

    Hope this helped 🙏

    Good luck and happy coding! 💪

    Marked as helpful
    0
    Rupak Mukherjee•1,070
    @hannibal1631Posted 6 months ago

    @kodan96 And what about the hover effect?

    0
    Koda👹•3,830
    @kodan96Posted 6 months ago

    @hannibal1631

    just apply display none on the overlay and you can toggle it on hover like this:

    .card:hover .overlay {
  display: block;
}
    0
    Rupak Mukherjee•1,070
    @hannibal1631Posted 6 months ago

    @kodan96 thanks man, really appreciate this.

    0
  • Riktam Nandi•230
    @rdxnandiPosted 6 months ago

    Nice bro

    0
    Rupak Mukherjee•1,070
    @hannibal1631Posted 6 months ago

    @rdxnandi thanks mate.

    0

Please log in to post a comment

Log in with GitHub

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