In this demo the top picture is blended with the content behind it, which is in this case the bottom picture (can be also background). The blending is done by the mix-blend-mode. The result of the blending is the the composition of the two pictures.
Both pictures are located by the absolute position one on top of the other in the .demo-block area. The picture, which is defined later in the html is the top picture.
Example of applying the blending mode in CSS:
#source { mix-blend-mode: multiply; }
When the blending modes in the select area is chosen, the appropriate event handler sets the mix-blend-mode property of the top picture (the source) to the specified mode. We do it in JavaScript by:
$( '#source' ).css( 'mix-blend-mode', mode );