Skip to content
Submitted about 1 year ago

NFT preview card using flexbox and :hover

Thomas Schütz•280
@Nospiel-code
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

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

  • Jakub Serok•510
    @jakubSerokPosted about 1 year ago

    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
    Thomas Schütz•280
    @Nospiel-codePosted about 1 year ago

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

    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