Skip to content
Submitted 2 months ago

Nostromitos NFT preview card

Nostromito•190
@Nostromito
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

What are you most proud of, and what would you do differently next time?

Getting the grasp of the easier stuff now. I need to work on the cleanliness of my code.

What specific areas of your project would you like help with?

If anyone could point out why my hover over my main image has a longer height than the image itself, that would be great. Couldn't figure that one out.

Community feedback

  • Huy Phan•2,300
    @huyphan2210Posted 2 months ago

    Hi, @Nostromito

    I saw your question and might have an answer for why the overlay extends beyond the image after hovering:

    • The hover effect is applied to the .icon element, not the image itself. The image fills the width of the .hover parent element but does not cover the full height (the image is 260x260, while the .hover element is 260x264). The .icon element, however, fills both the width and height of the .hover element. To resolve this, you need to ensure the image also fills the entire width and height of the .hover element.

    Hope this helps!

    Marked as helpful
    0

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