I’m adding a gradient overlay to an image using a pseudo element, then trying to fade that gradient out on hover.
The reason I’m adding the gradient to a pseudo element rather than the element itself is so I can also apply a blend mode. (I’m not sure of a way of blending a background gradient with a background image of the same element).
Everything seems to work fine, except when I hover over the image, a flash of white appears below the image. I believe this has to do with backspace visibility, though I’m not sure how. All of the similar issues/fixes I’ve found have mixed results, like making the white space appear constantly rather than just flashing, but none eliminate it entirely.
I suspect this has to do with the pseudo element but again, no idea why..
Any ideas? Thanks!
You’ll need to view the editor or full screen to see the whitespace.