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.
http://codepen.io/chasebank/pen/VLYPyq/
