Skip to content
Submitted over 3 years ago

Nft-preview-card-component

Tomas Scerbak•720
@TomasScerbak
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I couldn't figure it out how to make view-icon to stay white on hover. Any help would be appreciated.

Code

Please log in to post a comment

Log in

Community feedback

  • Parves Hossain Rabby•560
    @Iamparves

    That's happening because you are using opacity to control the cyan background. Since the icon is the child of overlay div it's also becoming transparent with the background. Instead you should use hsla/rgba color for the overlay background and opacity for the icon.

    I did the overlay using pseudo element. You can try that method as well. My Soluton

    Marked as helpful
  • Lakhvider Singh•170
    @Ls6375

    use display block on the image it will fix the extra overlay issue

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