NFT Preview Card, pseudos

I wish to remember that an img element by default is inline and this means it sits on the baseline with any text, text has a descender, thus img without manipulation also has a descender. This led to my cyan overlay having 4px of extra extension. I solved at first by setting line-height to 0, but then on realising the behaviour was about display, instead I set the img to block.

Working with pseudos is tricky due to reduced feedback, in the past I've had no answer, but here debugged by created a div.pseudo-before and styling that, this gave access to inspection tools.

As I think, not wholly sure why my overlay works, by rights the cyan background is ::before the image, so surely it has a lower z-index and should not be visible?