Mask Image in CSS and JavaScript

HTML

<div>

    
    <div class="image2">
        
    </div>
</div>

CSS

.container {
    position: relative;
    width: 500px;
    height: 300px;
    background: url(http://i.cdn.turner.com/asfix/repository/8a250ba137a3e1540137a444965e005a/aqua-something-you-know-whatever-zucotti-aftermath.jpg) top left no-repeat;
    background-attachment: fixed;
}

.image2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background: url(http://www.newscientist.com/blog/lastword/uploaded_images/080305_something_eats_wasps-713360.jpg) top left no-repeat;
    background-attachment: fixed;
    border-radius: 50%;
    display: none;
}

JavaScript

var mousedown = false;
$('.container').on('mouseover mouseup', function() {
    mousedown = !mousedown
    if(mousedown) {
        $('.image2').css({
            display: 'block'
        });
    } else {
        $('.image2').css({
            display: 'none' 
        });
    }
});
$('.container').on('mousemove', function(e) {
    if(mousedown) {
        $('.image2').css({
            top: e.clientY - 50,
            left: e.clientX - 50
        });
    }
});