css mix-blend-mode and masks

Question

Can an image be used as a mask when using the mix-blend-mode and webkit-mask-composites. For example can I use a white circle as a mask over another image to show only the area contained within both elements. Not what is outside either of the elements. See image the original image being the blue square and the mask being the circle. I want to only show the little bit of the image left after the mask is applied. Please note that this is a simple example my actual mask is a lot more complex and cannot be mimicked by a basic shape.mask

Answer 1

If you want jQuery I got a solution for you:

function addOverlapBox() {
    var wrapper = $('#wrapper'),
        div1 = $('#div1'),
        div2 = $('#div2'),
        overlay = $('<div id="overlay"></div>');
       wrapper.append(overlay);
    
    
    setInterval(function() {
        theta += 0.01;
        div1 = $('#div1'),
        div2 = $('#div2'),
        overlay = $('#overlay');
        
    var l1=100 + 20*Math.cos(theta);
    var t1=80 + 50*Math.sin(theta);
    var w1=div1.width();
    var h1=div1.height();
    
    var l2=70 + 30*Math.cos(2*theta);//div2.offset().left-8;
    var t2=90 + 32*Math.sin(theta);//div2.offset().top-8;
    var w2=div2.width();
    var h2=div2.height();        
        
        div1.css({'top': t1, 'left': l1});       
        div2.css({'top': t2, 'left': l2});     
            
    var top = Math.max(t1,t2);
    var left = (l2>l1 && l2<(l1+w1)) ? l2 : (l1>l2 && l1<(l2+w2)) ? l1 : 0;
    var width = Math.max(Math.min(l1+w1,l2+w2) - Math.max(l1,l2),0);
    var height = Math.max(Math.min(t1+h1,t2+h2) - Math.max(t1,t2),0);
    overlay.css({'top': top, 'left': left, 'width': width, 'height': height});
    }, 10);


}

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

theta = 0;

addOverlapBox();

#wrapper {position:absolute; margin-top:0px; width:500px; height:300px;padding: 0px;}

#div1 {background-color:rgba(100, 20, 180, 1); width:80px; height:80px;position:absolute; left:60px; top: 50px; z-index:2;border:0;}
#div2 {background-color:rgba(249, 177, 67, 1); width:110px; height:70px; position:absolute; left:60px; top: 100px; z-index:1;border:0;}
#overlay {background-color:rgba(0, 0, 0, 1); position:absolute;z-index:10;border:0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
</div>

It's a animated so you can see that it's not just another div, where the divs intersect. That doesnt work with border-radius:50% i.e. tho because divs with rounded borders are actually still rectangles, just with a hidden border-radius.

You can find a non-animated version here: http://jsfiddle.net/GApu5/32/