Skip to content
Submitted almost 3 years ago

NFT Preview Component

Milen Nenkov•80
@milen-nenkov
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

Hi,

I used background-blend-mode for the hover effect on the image. I think the color is not the same like the design but it is close.

Could you please let me know how you would have approached this?

Regards Milen

Community feedback

  • MikevPeeren•2,100
    @MikevPeerenPosted almost 3 years ago

    Hey there,

    Good job on finishing this one.

    You could've used the cyan color provided and added opacity 0.5 to it on hover, that should solve your problem.

    Marked as helpful
    0
  • Lakhvider Singh•170
    @Ls6375Posted almost 3 years ago

    Add overlay div in the image container. div-container img div-overlay

    set div-overlay postion abosolute top 0 left 0 and width 100% h= 100% and put img and background-color inside it ## set it's opcatity to 0 set div-container position relative

    now on hovering the div-container sets the div-overlay opacity to 1

    if you still can't understand to my repositry

    https://github.com/Ls6375/Frontend-Projects_Frontend-Mentor/tree/main/4.%20nft-preview-card-component-main

    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