Submitted 9 months ago

NFT preview card component

Jan Kotvaš•360

@DrakeHermit

Preview site View code

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.

Please log in to post a comment

Community feedback

haquanq ®️•1,565
@haquanq
Posted 9 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

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