NFT Card Component

Hello @britez13, You did a Great job for this challenge. your solution is almost identical to the design, also your HTML structure is very good made.

For more improvements you can do the following:

• You can make hover effect of the image more smoother by using transition property.
• instead using both ::after and ::before pseudo elements you can use one of them as the styles below and everything will work fine:

.card__figure::after {
        content: url(./images/icon-view.svg);
        position: absolute;
        background-color: var(--cyan-color);
        width: 100%;
        height: 100%;
        opacity: 0;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
       border-radius: 1rem;
        overflow: hidden;
        transition: .3s ease;
	}

.card__figure:hover::after {
        opacity: 1;
	}

• the active state of the design requires changing the color property of <h1>` and author in the footer elements

.card__title,
	card__author-link {
        transition: 0.3s linear; /* don't forget transition */
	}

.card__title:hover,
	     card__author-link:hover {
             color: var(--cyan-color);
	}

• you can see My solution for this challenge it may be useful for you.!

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀