Submitted almost 2 years ago

NFT Preview Card Component

Nicholas Albuquerque•270

@nicoams

Preview site View code

This is a solution for...NFT preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi there.

I would like some feedback on the overlay. I thought about doing it with css :after but ended up doing some html instead. Is there a better practice about this?

Thank you!

Community feedback

Fat•910

@FahatmahPosted almost 2 years ago

Hello Nicholas Albuquerque! 😊

I think you just need your .card-banner give a position: relative; and then you can try this:

.card-banner::before {
   content: url(images/icon-view.svg);
    background-color: var(--Cyan);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    inset: 0;
    opacity: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    transition: 0.5s;
    cursor: pointer;
}

This was what I did to mine. Hope it helps you! 😊

Please log in to post a comment

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