Skip to content
Submitted almost 2 years ago

Simple solution using Flex and Grid

Nikolas Papenfus•380
@NPM0486
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

Are the class names appropriate? Did I give too many div tags? I had a problem with the hover on the photo, I currently made a div that is above the photo, but in the plans I had to use :after but it didn't work so I went to plan B.

Community feedback

  • Dave Quah•660
    @MilleusPosted almost 2 years ago

    Hi Nikolas, congrats on completing the challenge 🥳

    There seem to be an issue where when the mouse is at the center of the picture (where the invisible "eye" is), the overlay and eye disappears. I believe this is because in CSS the effect triggers on .overlay:hover, but when the mouse is in the center it is hovering over the invisible <img class="view"> instead of the <div class="overlay">.

    One way to fix it is to set pointer-events: none to the <img class="view">, https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events.

    Another way to fix this is to remove <img class="view"> and add it as a background-image to the overlay instead.

    I hope you wouldn't mind if I share my solution with you. It uses background-image as well as :after - https://www.frontendmentor.io/solutions/nft-preview-card-component-rJRIRaSVc

    Hope this helps and happy coding!

    Marked as helpful
    0
    Nikolas Papenfus•380
    @NPM0486Posted almost 2 years ago

    @Milleus Thanks a lot! I didn't even notice the error. I have corrected my mistake. :D

    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