Skip to content
Submitted almost 2 years ago

nft-preview-card-component - Basic HTML/CSS

Vitor Magnago•130
@VitorMagnago
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

Another challenge similar to the previous ones but this time I tried to use new things I'm learning, like improving semantic HTML5 markup, CSS Grid and Mobile-first workflow.

The main difficulty was creating the overlay effect when hovering the cursor over the image. I got a satisfactory result regarding the background color but I didn't get the same with the "view", it should have the solid bank color, and not be affected by opacity: 0.5;. Any better way to do this?

Community feedback

  • Siva•210
    @sivakumarsPosted almost 2 years ago

    Hi, Vitor.

    You've done a good job on this challenge. To address your question, another way to implement the overlay effect is to use pseudo elements ::before and ::after and position them relative to a containing block.

    Stack those pseudoelements using z-index property on hover. This way, you can control the opacity of the 'view' icon too. Right now, you have nested it inside a <a> tag and applying the color property to the anchor ( <a> ) element

    I usually use position property whenever I feel the need to overlap elements. I hope this helps you! Good luck :)

    Marked as helpful
    1
    Vitor Magnago•130
    @VitorMagnagoPosted almost 2 years ago

    @sivakumars Thanks for the feedback. I'm going to do some tests with these tips you gave me.

    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