Submitted about 2 years ago

NFT Preview Card Component with TailwindCSS

Mofe• 440

@Mofe620

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

This is my first attempt at tailwind. It seems bittersweet. It's easy, but I guess I kept fighting the urge to create a custom stylesheet and get things to work right away 😢. So far I'm unable to get the cyan overlay and view icon to work in the active(hover) states. Any help will be much appreciated. Thanks

Community feedback

akirem• 270

@Akirem749

Posted about 2 years ago

html- put the icon in an overlay <div>

.overlay{ width: image-width; height: image-height; position: absolute; //make the card container position:relative background-color: hsla(178, 100%, 50%, 0.4); top: 20px; //image-position left: 20px; //image-position opacity: 0; border-radius: 10px; transition: opacity .3s; display: flex; //to center the icon justify-content: center; align-items: center; }

.overlay:hover{ opacity: 1; cursor: pointer; }

Marked as helpful

Mofe• 440

@Mofe620

Posted about 2 years ago

@Akirem749 Thanks!! Worked perfectly. I'm really grateful.

akirem• 270

@Akirem749

Posted about 2 years ago

@Mofe620 anytime let's be friends here is my Twitter account - @akirem20

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