How to create a transparent region (div) over semi-transparent background?

Question

I want to create a 'magnifying lens' ui for a web page. Anything on the page directly below the lens should be visible, while everything else should be made semi-transparent. In other words, I want to create a semi-transparent layer (which blocks the entire page) with a transparent 'hole' (lens) in it. I should be able to move the lens around, and possibly, resize the lens as well. I have thought of a solution that involves covering the entire page with 3x3 divs, making all the divs semi-transparent except for the middle one which will host the lens and will be completely transparent. I would then handle resize & move of the lens-div (and other divs around it) in javascript. I am looking for alternate, simpler solutions to this problem.

Thanks in advance!

Answer 1

Nice question! Consider this simplified implementation:

var $helperLeft = $('.helper-left'),
    $helperRight = $('.helper-right'),
    $helperTop = $('.helper-top'),
    $helperBottom = $('.helper-bottom'),

$view = $('.view').draggable({
    drag: onDrag
}),
viewWidth = $view.width(),
viewHeight = $view.height();

function onDrag(event, ui) {
    $helperLeft.css({width: ui.position.left});
    $helperRight.css({left: ui.position.left + viewWidth});
    $helperTop.css({
        width: viewWidth,
        left: ui.position.left,
        height: ui.position.top
    });
    $helperBottom.css({
        top: ui.position.top + viewHeight,
        left: ui.position.left,
        width: viewWidth
    });
}

onDrag(null, {position: $view.position()});

That's it! Very short and simple. I think resizing is straightforward too.

Demo: http://jsfiddle.net/j74A9/