Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Astro, WCAG Accessibility, CSS Flexbox & CSS Animations

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

@markteekman

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

Posted

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

@markteekman

Posted

@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

Log in with GitHub
Discord logo

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