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
