Skip to content
Submitted 4 months ago

NFT preview card component

Jan Kotvaš•290
@DrakeHermit
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?

Other than trying to figure out the issue with image hover overlay nothing else. But I am proud of myself of actually managing to pull that effect off even if it's not perfect.

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

The only problem I had was with the image hover.

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

I would love if someone could tell me how to make the image hover state work as it should, because right now it does display the overlay but it flickers as I move my mouse, and I can't for the life of me figure out why.

Community feedback

  • haquanq ®️•1,585
    @haquanqPosted 4 months ago

    Hello @DrakeHermit 👋👋

    About hovering the image that trigger another element, don't use z-index. Do this instead

    .overlay {
    opacity: 0; 
    pointer-events: none; /* the mouse won't hover this element */
    transition: 200ms ease; /* add transition effect when properties change */
    .... others styles ....
}

img:hover + .overlay {
    opacity: 1;
}

    z-index changes element stack index based on position: relative | absolute, it is flickering while hovering the image because when you hover you push the .overlay to the top by setting z-index: 1 (the img has no z-index so it stays back and lose focus to .overlay) and the hover event keep firing again and again

    If you want you can check out my solution for this challenge

    Hope this help 🦛🦛🦛

    Marked as helpful
    1
    Jan Kotvaš•290
    @DrakeHermitPosted 4 months ago

    @haquanq

    Thanks a bunch man, this really helped me out a ton, fixed version should be up soon. Also your explanation is great, you taught me quite a bit today.

    0
    haquanq ®️•1,585
    @haquanqPosted 4 months ago

    @DrakeHermit that is glad to hear 😄😄😄

    1
    haquanq ®️•1,585
    @haquanqPosted 4 months ago

    @DrakeHermit Hey where is the fixed version 🥸🥸🥸 it's been 2 days

    0
    Jan Kotvaš•290
    @DrakeHermitPosted 4 months ago

    @haquanq Hey it should be fixed by now, but thanks for mentioning me cuz I totally forgot to hide the overlay for mobile devices.

    0
    haquanq ®️•1,585
    @haquanqPosted 4 months ago

    @DrakeHermit ahh okay thought u were gonna post another solution

    edit: Why did you put :hover on media query?? Suppose you are worrying about mobile devices compatibility then use this

    @media (hover:hover) {
    /* only apply to device that support hover */
}
    0
    Jan Kotvaš•290
    @DrakeHermitPosted 4 months ago

    @haquanq Honestly I went with the mobile first approach, that's the only reason why I put :hover in media query. But ye you are right it's redundant to do so.

    I'll probably just use the media query you suggested for my next challenge. Thanks for the tip

    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