Submitted about 1 year ago

NFT Preview Card

Abdur Rahman•70

@nuraf9607

A solution to the NFT preview card component challenge

Preview Code

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?

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Koda👹•3,830
@kodan96
Posted about 1 year 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! 🙌

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