Skip to content
Submitted almost 3 years ago

Responsive NFT card with overlay

Tiar K•120
@ATiarK
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

There's one thing that I really confused. In the image hover, I used icon 'eye' from font awesome. My question is why the icons got the opacity similar to the container? Although in the design preview I see the color is totally white, but when I tried to increase the opacity icon only, it doesn't work.

Community feedback

  • dewslyse•3,025
    @dewslysePosted almost 3 years ago

    Hello @ATiarK! Congrats on your submission.

    Following up on what @ninjacanthi1995 said,

    • make sure the <div class="icon"> is not a child of <div class="overlay fade"> .
    • Once you've done that, you can set the initial opacity on .icon to 0.
    • You can then alter the opacity on .icon with the hover selector
    container:hover .icon {
  opacity: 1;
}

    Hope this helps.

    Marked as helpful
    1
  • HOANG Minh Chau•210
    @ninjacanthi1995Posted almost 3 years ago

    You can not override the opacity for the child component. But there's one way for this case is to use rgba color by changing the alpha property.

    Good luck ;)

    Marked as helpful
    1

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