CSS Blend Modes - Image blending with with mix-blend-mode and isolation

Remove isolation from the <div> contating the pictures (Hover over images to see the how the elements blend with the layers underneath).

mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: color-burn;
mix-blend-mode: screen;
mix-blend-mode: hard-light;


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.


Demo by @shwetank. Thanks to Rik Cabanier for some nice improvements. All credited photos are available under creative commons.