General

The top picture located in div2 is blended by the mix-blend-mode property with the picture/background-color behind it - in this case it is bottom image located in div1.

If 'Shift' checkbox is selected, the top image is shifted left. There is background under this left area. Thus, the shifted area will be blended with the background color undernith if there is no div1 or div2 isolation.

When 'Isolate' checkbox is selected on div1/div2, the appropriate div isolation property is set to isolate to prevent the blending. For example if 'Isolate div2' is selected, the following will be applied to prevent div2 (top image) blending:

.div2 { isolation: isolate; }

In case of div2 isolation, the top picture is fully isolated from any content behind it (div2 is top image container). Thus, no blending is done in this case.

In case of div1 isolation, the left part will not be blended with the background, while the ovelap picture area will still be blended (div1 is the container of both pictures).

JavaScript Code

There are 5 event handlers for the following events:

• Selecting blending mode in the select area: in the handler we set mix-blend-mode property of the top picture to the specified mode.
• Setting the color in the color input box: in the handler we set background-color property of the display to the specified mode.
• Checkingthe 'Shift' checkbox: the top image is shifted left, while tje bottom is shifted to the right.
• Checking the 'Isolate div1/2' checkbox: the isolation property is set to 'isolate' on the specified div.