Explanation
Beneath each <img> element is a <div>, with a particular background color. On hover, the background-color
is transistioned to 'transparent'. When isolation
is set to isolate
(default here) then the mix-blend-mode doesn't have any color to mix the image's color with, so we get the proper image.
When isolation
is set to auto
, then all elements are in the same stacking context, and on hover, the mix-blend-mode find the layer underneath (the white color) to blend with.
Credits
Demo by @shwetank. Thanks to Rik Cabanier for some nice improvements. All credited photos are available under creative commons.