JSFiddle - React, Tailwind, and code Playground

HTML

<div id='position'></div>
<div id='new' class='picture'></div>
<div id='old' class='picture'></div>

CSS

.picture {
	position: absolute;
	width: 500px;
	height: 500px;
    cursor: pointer;
}

#old {
	background-image: url(http://www.thefaeriesandangelsmagazine.com/resources/VEN-virtual-enterprise-network-business-opportunities-small-fish_id799929_size485.jpg?timestamp=1267988673507);
    background-repeat:no-repeat;
}

#new {
	background-image: url(http://www.azaadbazaar.com/images/Head%20to%20Toe/earring_hoops_small.jpg);
}

JavaScript

$('#old').mousemove( function(e){
        var parentOffset = $(this).parent().offset();
        //mouseX = e.pageX;
        //mouseY = e.pageY;
        var mouseX = ((e.pageX - parentOffset.left) / $('#old').width());
        var mouseY = ((e.pageY - parentOffset.top) / $('#old').height());
        //mouseX = Math.round( mouseX * 10 ) / 10;
        
        $('#position').html(mouseX+" "+mouseY);
        $('#old').css('opacity', mouseY);
        $('#new').css('opacity', mouseX);
        
        
    });

    $('#old').mouseout(function(){
        $(this).animate({opacity: '1.0'}, 1000);
    });