CSS3 Lens experiment

Doesn't work too well ... But you get the gist.

HTML

<div id="wrap">
<img id="img" src="http://farm3.static.flickr.com/2786/4199953283_3eb9def019.jpg" />

<a id="hotspot"></a>
</div>

CSS

#hotspot {
    position: absolute;
    top: 50px;
    left: 50px;
    display: block;
    height: 200px;
    width: 200px;
    border: solid 3px rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 250px;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    background: url(http://farm3.static.flickr.com/2786/4199953283_3eb9def019.jpg) 0 0 no-repeat;
}

#wrap {
    float: left;
    padding: 50px;
}

JavaScript

var img = $('img');
var iDim = img.getCoordinates($('wrap'));
img.width = iDim.width / 2;
var hotspot = $('hotspot');
    
new Drag.Move(hotspot, {
    snap: 0,
    container: $('wrap'),
    onDrag: function(e){
        
        var pos = [
            -(parseInt(this.value.now.x)), 
            -(parseInt(this.value.now.y))
        ];
        
        $('hotspot').setStyle('background-position', pos);
    }
});