javascript - Put overlay on document with transparent window -

i document quite unique (haven't seen before) , maybe not possible.

what have div overlay in document, maybe give background black nothing visible. second have small squire window in overlay doesn't share black background, in fact transparent , therefore possible 'peek' trough window see document content. content window is. kinda "zoom" plugins in small portion being zoomed, in case show specific content. idea how create such thing?

an example of can following (it may not best works)

html

<div id='peakview'></div> <!-- div view window --> <div id='out'>     <div class='overlay'></div>     <div class='overlay'></div>     <div class='overlay'></div>     <div class='overlay'></div> </div> 

the <div> inside of #out re-size accordingly position of #peakview creating illusion of full overlay. can done simple css , calculus.

mainly need position of element on screen.

var h = $(this).offset().top; var l = $(this).offset().left; var r = ($(window).width() - ($(this).offset().left + $(this).outerwidth())); //right offset var b = ($(window).height() - ($(this).offset().top + $(this).outerwidth())); //bottom offset 

in example used .draggable() jquery ui move div around. , while dragging 4 divs shown above adjusting height , width fill space between #peakview , document border.

an example first div

$('.overlay:eq(0)').css({      top: 0,      left: 0,      width: '100%',      height: h  //the height changing depending on #peakview .offset().top }); 

in fiddle see how filling divs behave