Submitted about 2 years ago

NFT Preview Card - using flexbox

Anton• 190

@septober92

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

As a newbie (1 month of studying HTML&CSS) I found the NFT image overlay + the view icon the most difficult part of this project.

I appreciate some feedback, thanks ;)

Community feedback

Ahmed Bayoumi• 6,740

@Bayoumi-dev

Posted about 2 years ago

Hey Anton,

There is an issue with the view-icon transparent... to fix it, Use background-color: hsla(178, 100%, 50%, 0.5); instead of var(--cyan); and change opacity: 0.8; to opacity: 1;

.overlay {
  //...
  background: hsla(178, 100%, 50%, 0.5);     /* <--- Changed */
}
.nft-container:hover .overlay {
    opacity: 1;     /* <--- Changed */
}

I hope this is helpful to you... Keep it up👍

Marked as helpful

Anton• 190

@septober92

Posted about 2 years ago

@Bayoumi-dev Hey Ahmed!

Thank you for your help!

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