Skip to content
Submitted about 3 years ago

NFT Card Component

Ines Riahi•110
@inesriahi
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

Hi, I have implemented the hovering effect over the image using another div that changes its opacity when the link hovers. However, I think that this is not the best way to do this, maybe using pseudo-elements is better. I tried to implement this but the ::after element is not displayed.

Please tell me some advice regarding this.

Also, when the image hovers, you may notice a bar under the image that is covered by the overlay. I don't know why it is showing although I am setting all the margins and paddings to 0.

I appreciate your help, Thank you in advance

Community feedback

  • tomas•150
    @ttoomasPosted about 3 years ago

    Hi. I write in advance, I'm not an expert, I don't know if it's right, but you can try it.

    Create a parent <button> that will have position: relative. Then create a pseudo-element :: before for this button, which will have content: url ("picture") position: absolute, opacity: 0 and center it with display: flex (picture view) . Then add only <img> to <button>. Then you do button:hover::before and add opacity: 1.

    I hope my advice helped!

    Marked as helpful
    1
    Ines Riahi•110
    @inesriahiPosted about 3 years ago

    @ttoomas This is really helpful. Thank you so much.

    0
  • Lakhvider Singh•170
    @Ls6375Posted about 3 years ago

    Just put the display Block in you img tag it will solve the issue of extra space below the image

    Refer to this link if you wanna know further about it https://codeutility.org/image-inside-div-has-extra-space-below-the-image/ thnx

    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