Design comparison
Solution retrospective
Thanks for taking a look at my project!
I would like some feedback if you'd be so kind. Particularly, those pesky z-index problems I have when using opacity and creating transitions with overlapping elements. I don't seem to catch the drift and frustratingly I drift off into the sunset without a clue as to why my svg is not displaying even though I have opacity set to 1...? I managed to fix it but I think that was down to dumb luck.
Thanks again! Gareth
Community feedback
- @dwhensonPosted over 2 years ago
Hey Gareth - Nice job here! Everything works and it looks good - that's the main thing!! 🥳
z-indexes and opacity can get a little complicated, as elements with opacity less than one creates a new stacking context. I'm not sure if you've come across stacking contexts yet, and if you are just getting started with CSS I wouldn't worry too much, but if z-index is behaving strangely that's most commonly the case.
If you google I am sure you can find some nice explanations of z-index and opacity and the issues it can cause.
But, IMO, better to avoid z-indexes if you can - I think in this case just putting the SVG after the image in the HTML might work? That way you can just use the flow of the HTML document to make the SVG appear on top of the image rather than setting it manually. I tried in my dev tools quickly and I think this should work - but I only tried quickly...
Hope this helps a little and keep up the good work!
Cheers Dave
1
Please log in to post a comment
Log in with GitHub
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