Responsive Card Component w/ Hover Animation CSS


Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
View Challenge

Design Comparison




Accessibility Issues


HTML Issues

View Report

Christian Lam’s questions for the community

How to optimise HTML Structure/CSS? ie. Unnecessary divs, better grouping of elements

Are there better methods to create an overlay animation over an image?

How to reduce repeating styling in CSS, and in-line styling in the HTML?

Community Feedback




Hi Christian, nice work. You forgot your alt attribute on your img tag, it's important for accessibility and SEO. I saw you use a div to make your overlay. It's perfectly good. But most will use the pseudo element ::before to make that kind of effect.

For the structure I would suggest you to learn BEM methodology. Super easy to learn and it will help you to structure your class. Also, read about HTML 5. You could make your HTML structure more accessible with tag like <footer> instead of using a div with a class footer.

Hope it helps. Keep up !

Marked as helpful




@Eric-Ferole Thanks for the advice!


darryncodes 5,170



Hi Christian,

Really decent solution, nice work with this one!

I'd recommend reviewing your accessibility and html report it's a good habit to get into:

Overall though a really good design aesthetically!

Marked as helpful


Give some feedback to @ui-Auxilary about their solution...

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!