Skip to content
Submitted almost 3 years ago

NFT-Preview-Card-Componen

ADITYA KUMAR•190
@akaditya394
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

How to add the hover on the image view? How to make the eye image appear on hovering and also the color thing to appear? please help!

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    Hi ADITYA, good work!

    There are several ways to handle the effect :hover. For example, I created a div that appears on hover.

    Look here -> my solution

    Also try using Flexbox, it can help you better center elements on the page: give the flexbox and height properties to the body and remove all margin from the .nft-component class.

    Read the guide -> Flexbox

    Note: Flexbox aligns to the size of the parent container.

    You can use the vh measurement for the height... Viewport Height handles the sizing of an element in relation to the height of the browser window.

    I hope that helps ;) Keep it up!

    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