Design comparison
Solution retrospective
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
- @kodan96Posted 5 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! ๐
1@nuraf9607Posted 5 months ago@kodan96 I Appreciate it man, for half an hour I was confused about why it wasn't working ๐คท, Now I get it
0
Please log in to post a comment
Log in with GitHubJoin 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