A CodePen by Jonathan Cutrell. Where's Waldo? - A little bit of webkit filter exploration, and a few little tricks here and there.

index.html

<div id="imageholder">
  <img src="http://3.bp.blogspot.com/-JlYXI_mJn7U/UFIJ7_8iLJI/AAAAAAAAAWY/ClZoftC59Uc/s1600/TheGobblingGluttons.jpg">
  <div id="glass"></div>
</div>

script.js

$("#imageholder").on("mousemove", function(e){
  var ofst = ($(window).width() - 1024)/2;
  $("#glass").css({
    left :  Math.round(e.pageX - 60 - ofst) + "px",
    top : Math.round(e.pageY - 60 )  + "px"
  });
});

style.css

body {
  background: #000;
}
#imageholder {
  width: 1024px;
  margin: 0 auto;
  position: relative;
}
img {
   position: absolute;
  top: 0;
  left:0;
  -webkit-filter: saturate(40%) blur(2px);
  z-index: 888;
}

#glass {
  position: relative;
  width: 120px;
  height: 120px;
  display: block;
}
#glass:before {
  position: absolute;
  display: block;
  width: 100px;
  height: 100px;
  top: 3px;
  left: 3px;
  content: "";
background-image: url(http://3.bp.blogspot.com/-JlYXI_mJn7U/UFIJ7_8iLJI/AAAAAAAAAWY/ClZoftC59Uc/s1600/TheGobblingGluttons.jpg);
  background-repeat: no-repeat;
  border-radius: 100px;
  -webkit-filter: blur(0px);
  background-position: top center;
  background-attachment: fixed;
  border: 2px solid rgba(255,255,255,0.4);
  z-index: 898;
  zoom:1.1;
}
#glass:after {
  position: absolute;
  background: #000;
  width: 120px;
  height: 120px;
  content:"";
  display: block;
  border-radius: 100px;
  background-repeat: no-repeat;
  background-image: url(http://3.bp.blogspot.com/-JlYXI_mJn7U/UFIJ7_8iLJI/AAAAAAAAAWY/ClZoftC59Uc/s1600/TheGobblingGluttons.jpg);
  background-position: top center;
  background-attachment: fixed;
  z-index: 889;
    -webkit-filter: blur(1px) saturate(120%);
}