Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT Card Component

Ines Riahi 110

@inesriahi

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@ttoomas

Posted

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

@inesriahi

Posted

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

0

@Ls6375

Posted

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
Discord logo

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