index.html

<figure id="window">
  <img src="http://wikitravel.org/upload/shared//6/60/Pittsburgh_skyline_view.jpg" />
  <div id="filter"></div>
</figure>
  <a href="https://twitter.com/bennettfeely">@bennettfeely</a>

script.js

$('#window').mousemove(function(e){
    var window = $(this);
    var xpos = e.pageX - window.offset().left;
    var ypos = e.pageY - window.offset().top;
    
  $("#filter").css({
   top : ypos,
   left : xpos,
   backgroundPosition : '-' + xpos + 'px -' + ypos + 'px'
});
  
});

style.css

body { background:#222; text-align:center;}

figure { 
  position:relative;
  width:600px;
  height:390px;
  margin:20px auto 0;
  box-shadow:0 4px 15px #000;
  overflow:hidden; 
  cursor:none;
}

img { 
  width:100%;
  height:auto; 
  -webkit-filter:grayscale(1) blur(3px); /* You can basically put whatever filter(s) you want here... */
}

#filter {
  position:absolute;
  width:150px;
  top:60px;
  left:200px;
  height:150px;
  border:1px solid rgba(0,0,0,0.3);
  background-image:url(http://wikitravel.org/upload/shared//6/60/Pittsburgh_skyline_view.jpg);
  background-size:600px 390px;
  background-position:-200px -60px;
  border-radius:50%;
  box-shadow:0 0 30px rgba(0,0,0,0.2);
}


/* Please excuse my self-promotion... */

a { display:inline-block; font-family:sans-serif; padding:15px 40px 30px; text-decoration:none; color:#555; text-shadow:-1px -1px 1px #111; }
a:hover { color:#4099FF; text-decoration:underline; }