Skip to content
Submitted almost 2 years ago

nft-preview-card-component

Ekwugha Clinton•60
@Klinteen
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

So basically during the workflow of the project, I had issues with the color overlay on the NFT image when a mouse is hovered. I was able to use the hover feature for the texts, but with the image, the color wasn't just popping.

I might have taken the wrong approach, but I am thankful for any help that I can get.

Community feedback

  • Dana Hong•340
    @Dana-HongPosted almost 2 years ago

    Hey Ekwugha,

    Good job with this challenge. To add a hover effect, what you can do is nest the NFT image inside of a <div>, along with another <div>. You can then add your view image and background colour to this <div>.

    Something like this:

    <div class="feature-image">
      <img src="*path_to_nft_image*" alt=""/>
      <div class="hover-overlay">
            <img src="*path_to_view-icon*" alt=""/>
      </div>
</div>

    Two pieces of general advice I would give:

    1. Avoid the use of type selectors like p, and img, unless you are using them to override defaults. You can read more here.
    2. Avoid the use of id selectors, since they are not reusable, and lead to a lot of repeated code. They're also better for scalability. You can read more here .

    Hope this helps!

    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