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

NFT preview card using flexbox and :hover

@Nospiel-code

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


Hey everyone, I have one question, when I hover over the image I see that the image div with the gradient is a bit higher than the image itself. I couldn't figure out what to do to get it to be the same size. Thanks for any help :)

Community feedback

@jakubSerok

Posted

Hello, try to set background-img in <div class="image"> then add a subdiv with icon. Set height and width for subdiv for 100% and it should work.

somthing like that in your project:

<div class="image"> <--"here set a backgrand image"

    <img class="view" src="images/icon-view.svg" alt="">
</div>

you can check it in my project

Marked as helpful

1

@Nospiel-code

Posted

Thanks for the help. I'll check out your project :)

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