Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Nostromitos NFT preview card

Nostromito 190

@Nostromito

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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 1,360

@huyphan2210

Posted

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
Discord logo

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