JSFiddle - React, Tailwind, and code Playground

HTML

<iframe class="iframe" src="http://css-tricks.com/the-perfect-fluid-width-layout/" frameborder="0" width="390" height="390" scrolling="no">IFRAME IS NOT SUPPORTED BY YOUR BROWSER</iframe>
<div id="t">test</div>

CSS

.overlay{
    color:#fff;
    cursor:pointer;
    background:rgba(0,0,0,0.1);
    position:absolute;
    top:0px;
    left:0px;
}
.overlay:hover{
    background:rgba(0,0,0,0);
}

JavaScript

var W=0, H=0, X=0, Y=0;
$(".iframe").each(function(i,el){
   W = $(el).width();
   H = $(el).height();
   X = $(el).position().left;
   Y = $(el).position().top;
   $(this).after('<div class="overlay" />');
    $(this).next('.overlay').css({
        width: W,
        height: H,
        left: X,
        top: Y        
    });
});

var mx = 0, my = 0;
$('.overlay').on('mousemove click',function(e){
    mx = e.clientX - $(this).position().left;
    my = e.clientY - $(this).position().top;
    $('#t').html(mx+' '+my);

    if(e.type==='click'){
        alert('clicked at: X='+mx+' Y='+my)
    }        
});