Skip to content
Submitted about 2 years ago

Responsive NFT card component with hover effects

Jacob Seymour•50
@Jacwilalasey
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

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,170
    @VCaramesPosted 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
    1

Please log in to post a comment

Log in with GitHub

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