Submitted over 2 years ago

Plain-CSS Responsive Nft Card Component

Zorah• 20

@ZorahScope

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

How would I go about applying the image overlay hover using flexbox?
The .container div had an additional 5px of height vs it's containing image , causing the overlay to bleed past the image a bit. Granted I found a solution with height: calc(100% - 5px); I don't understand why this was a thing.
What are common best practices for structuring/organizing CSS? ( Besides loosely following the HTML order in terms of how I declared CSS, it's more or less spaghetti)

Community feedback

Ahmad Muwaffaq• 60

@mupinnn

Posted over 2 years ago

Hi Eli! You made a great work. May this answer can help you further:

You don't need flexbox at all to create the overlay. Just use one container element and put image inside it, then use ::before or ::after pseudo-element selector to create the overlay and use background-color + background-image on it.
I don't have any idea why the div have an extra 5px event with box-sizing: border-box. For better and consistent element sizing, I recommend you to always use box-sizing: border-box.
You can try BEM or if using Sass, you can try this https://sass-guidelin.es/#architecture.

Keep it up, buddy!

Zorah• 20

@ZorahScope

Posted over 2 years ago

@mupinnn I appreciate the feedback. Thanks :)

Zorah• 20

@ZorahScope

Posted over 2 years ago

Unsure how to avoid this issue with making the view art overlay clickable

https://dequeuniversity.com/rules/axe/4.3/link-name?application=axeAPI

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