Skip to content
Submitted over 3 years ago

NFT Card Component

Ines Riahi•110
@inesriahi
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

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

Code

Please log in to post a comment

Log in

Community feedback

  • tomas•150
    @ttoomas

    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
  • Lakhvider Singh•170
    @Ls6375

    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

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