Skip to content
Submitted about 2 years ago

NFT Preview Challenge with an image overlay on hover

pvkom26•50
@pvkom26
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

Image overlay was somewhat new for me - and made me wonder on what the best approach here would be. At first I wanted to use a pseudo-element for this, but that didn't quite work. The solution I came up with was placing an <img> element and a separate <div> called "img-overlay" inside of an "image-container" and then setting "opacity" on "img-overlay" to 0 changing it to 1 on hover.

Are there better, more efficient ways to implement something like this? Let me know what you think in the replies!

Community feedback

  • バレンタイン 😈•64,190
    @VCaramesPosted about 2 years ago

    Hey, some suggestions to improve you code:

    • There are many ways to achieve the overlay hover effect, I did mines with CSS Grid.

    • Change the width to max-width: 350px; on the .card to get the correct width size.

    • Reduce the padding to padding: 24px;.

    • The NFT Alt Tag description needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image/icon to someone.

    • Wrap the "NFT image" in an Anchor Tags <a>. The anchor tag will allow users to click on content and have them directed to another part of your site.

    Happy Coding! 👻🎃

    Marked as helpful
    1
    pvkom26•50
    @pvkom26Posted about 2 years ago

    @vcarames thanks a lot! I'm not a premium member so getting the exact pixel values for padding and width is somewhat difficult

    0
  • vimalathithan•110
    @vimalathithan17Posted about 2 years ago

    nice solution bro...! I too had did a similar one...but instead of using opacity ,i used display property to acheive the overlay...u can check it out here if you wish-https://github.com/vimalathithan17/nft-preview-card-component-main.git ( fell free to give your feedback about mine too :D )... I too have learned a new idea to solve the overlay issue by viewing your solution : ) cheers buddy...!

    1
    pvkom26•50
    @pvkom26Posted about 2 years ago

    @vimalathithan17 thank you!

    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