Submitted about 3 years ago

Astro, WCAG Accessibility, CSS Flexbox & CSS Animations

#accessibility#astro#bem#sass/scss#animation

Mark Teekman•365

@markteekman

Preview site View code

This is a solution for...NFT preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I used the ::before pseudo element to create the overlay for when you hover over the image, it's actually something I've used for years now, but I was wondering whether nowadays there might be a better or alternative way to do this? I do like the fact that there is less HTML in the end, though you do need more CSS to style the pseudo element.

Community feedback

Haico Paulussen•170
@Haico-PaulussenPosted about 3 years ago
Hi Mark,

Well, great solution again from you! I really like how you always make sure the WCAG guidelines are honored. Also, the extra touches of interactivity and animations make it way more interesting. Well done!

One small thing you could change is to use a Grid or Flexbox in your card__content so you can space everything evenly and you don't need to use padding to make it as close as possible. But everyone has their own style, your solution works too!

I like what you did with the ::before to add the hover animation on the image, that's a smart solution!

Keep up the good work!
1
Mark Teekman•365
@markteekmanPosted about 3 years ago
@Haico-Paulussen thanks for taking a look at my solution and thank you for the compliments 😊 Great tip on using Grid for that! I'm pretty familiar now with using Flexbox and still trying to get the good grasps of how to use Grid more often. Will take a look at your solution and see what I can learn 🙂
0

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