Skip to content
Submitted 4 months ago

nft-preview-card-component-main

Igor-Carnauba•150
@Igor-Carnauba
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I dont know how to do the image overlay with the eye icon. Should be great if anyone could help me. Tks.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • P
    Stuart Roper•170
    @Ropenfold

    Hi,

    This is how I approached this issue, I also had the same issue as you in resolving this issue. I overcame this by putting the image inside a div and overlaying this when hovering over it, turning the opacity to 100:

    <div className="absolute inset-0 bg-cyan-500 bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity duration-300 rounded-lg z-10 flex items-center justify-center"> <Image src="/frontend-mentor-nft-preview-card-component/img/icon-view.svg" alt="View Icon" width={40} height={40} /></div> </div>

    Hope this helps!

    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