Design comparison
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
- @mupinnnPosted 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
::beforeor::afterpseudo-element selector to create the overlay and usebackground-color+background-imageon 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 usebox-sizing: border-box. - You can try BEM or if using Sass, you can try this https://sass-guidelin.es/#architecture.
Keep it up, buddy!
1 - You don't need flexbox at all to create the overlay. Just use one container element and put image inside it, then use
- @ZorahScopePosted 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
0
Please log in to post a comment
Log in with GitHub
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