sneas/img-comparison-slider

Doesn't work quite right with transparent images

rinogo opened this issue · 2 comments

When using images with an alpha channel (e.g. transparent PNGs), the existing masking approach doesn't work quite right.

The current approach assumes that .first-overlay will cover .second. When transparent images are in use, that's not a safe assumption - .second "shows through" where it shouldn't.

Fortunately, I was able to find a workaround in which I composited my background onto the images themselves. However, for a fully responsive design, it would be better to support transparent images natively.

sneas commented

Thank you for the feedback, @rinogo. I'll think about how to incorporate it in the future versions of the project.

There is native workaround - just assign some background on img. I.e. img {background: white;} and they will not see-through each other