Submitted about 2 years ago

Responsive NFT card component with hover effects

Jacob Seymour• 50

@Jacwilalasey

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi All!

Really happy with my progress over the past week, the frontend mentor community has been amazing!

A couple of questions on this one;

I was unable to figure out how to get the hover effect over the image, I tried (as you can see in my code) but this didn't seem to work, any guidance would be appreciated.
I don't think i've made it properly responsive when shrunk down to phone size, any tips on how best to achieve this would be great.

Thanks all! Look forward to the next challenge.

Community feedback

バレンタイン 😈• 64,190

@VCarames

Posted about 2 years ago

Congrats @Jacwilalasey on completing this challenge!

Card looks great!

To answer your first questions, here a link that shows you how to do it: https://www.w3schools.com/howto/howto_css_image_overlay.asp

As for the second question, the reason why your content isn't responsive, is due to your image not being responsive. To fix, change the width to 100% and delete the height. Once you do that , just play around with your other card values till you like how it looks and you'll be good to go.

Happy Coding!

Marked as helpful

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