Skip to content
Submitted over 2 years ago

NFT Component Card Challenge

Gio Velez•30
@Giologic
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

The overlay for hovering over the image was pretty hard.

I wanted to implement opacity for the overlay but the eye icon inside will also adapt to the opacity. If I was able to do this i would've been able to apply transitions. I just used display: none / display: block (on hover) for now.

What's the best way to apply an overlay with the icon not following the opacity of the color filter layer

Community feedback

  • Kaung Zin Hein•720
    @K4UNGPosted over 2 years ago

    Hey! Well done on this project. You could try giving the parent container a background color and then reduce the opacity of the image when hover so that it looks like an overlay. Happy Coding!

    1
    Gio Velez•30
    @GiologicPosted over 2 years ago

    @K4UNG thanks! Ill give this a try!

    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