Skip to content
Submitted over 3 years ago

Astro, WCAG Accessibility, CSS Flexbox & CSS Animations

accessibility, astro, bem, sass/scss, animation
Mark Teekman•365
@markteekman
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Haico Paulussen•170
    @Haico-Paulussen

    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!

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