Where is Waldo?

A fun use of jQuery. [email protected]

by Ryan Brackett

HTML

<div class="cover"></div>

CSS

body {
    padding: 0px;
    margin: 0px;
    background-color: #dedede;
    font-family: arial;
}
.cover {
    background: url(http://www.whereswaldo.com/m/images/maps_troy.jpg) no-repeat 50% scroll;
    top: 5%;
    left: 5%;
    height: 90%;
    width: 90%;
    overflow: hidden;
    position: fixed;
    background-color: white;
  background-size: 100% auto;
}
.cover:hover {  background-size: 800%;}

JavaScript

$('.cover').mousemove(function (e) {
    var mousePosX = (e.pageX / $(window).width()) * 100;
    var mousePosY = (e.pageY / $(window).height()) * 100;
    console.log(mousePosY)
    $(this).css('backgroundPosition', mousePosX + '% ' + (mousePosY) + '%');
});
$('.cover').mouseOut(function (e) {

    $(this).css('backgroundPosition', mousePosX + '% ' + (mousePosY) + '%');
});