Submitted 3 months ago

NFT Preview Card

Abdur Rahman• 70

@nuraf9607

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am Proud of the way I finished the challenge by forcing myself to follow DRY METHOD, I also did a good use of pseudo elements

What challenges did you encounter, and how did you overcome them?

I was struggling while using ::before and :hover, I was rewriting and inspecting elements for a while, It was a short intense struggle and then later I found out it was a silly blunder, I accidently did inset: 100% instead 0

What specific areas of your project would you like help with?

When I wrote img::before and I wanted it to cover my whole my image by using inset but nothing was showing up but when covered the image with a div and then used ::before on it, It worked as expected, I am still confused why is it that I used a same approach on both but it did work on the wrapper div but didn't directly worked over the image?

Community feedback

Koda👹• 3,810

@kodan96

Posted 3 months ago

hi there! 👋

Adding ::before or ::after to an HTML element means you're modifying its content, in programming terms you append content before or after the element's original content using CSS. You can't use pseudo-elements on image tags because images are so called replaced elements, meaning their content gets replaced by an external source, which is outside of the scope of CSS, and their content can't be modified directly.

Using a container div, which then can be modified is the most common way to solve the problem.

Hope this was helpful 🙏

Good luck and happy coding! 🙌

Abdur Rahman• 70

@nuraf9607

Posted 3 months ago

@kodan96 I Appreciate it man, for half an hour I was confused about why it wasn't working 🤷, Now I get it

Please log in to post a comment

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