Depth of field effect on hover. Based on PNGs with alpha transparency and SVG filters in CSS3. Currently only works in Chrome.

index.html

<!-- This depth of field effect uses SVG filters in CSS3 it currently only works in Chrome -->
<div id="photoframe">
<img id="full" src="https://dl.dropbox.com/u/32918455/camera%20pics/full.png" />
<img class="blurable" data-blurindex="10" id="fullblur" src="https://dl.dropbox.com/u/32918455/camera%20pics/full.png" />
<img class="blurable" data-blurindex="8" id="lenses" src="https://dl.dropbox.com/u/32918455/camera%20pics/lens.png" />
<img class="blurable" data-blurindex="6" id="cameras" src="https://dl.dropbox.com/u/32918455/camera%20pics/camera.png" />
<img class="blurable" data-blurindex="4" id="film" src="https://dl.dropbox.com/u/32918455/camera%20pics/film.png" />
<img class="blurable" data-blurindex="2" id="filters" src="https://dl.dropbox.com/u/32918455/camera%20pics/filters.png" />
<img class="blurable" data-blurindex="0" id="loupes" src="https://dl.dropbox.com/u/32918455/camera%20pics/loupe.png" usemap="loupemap" />
<map id="loupemap" name="loupemap">
<area shape="poly" coords="365,253,365,228,278,194,190,198,187,188,171,182,133,189,81,224,40,263,21,297,21,326,38,332,69,322,93,311,116,295,122,337,348,324,347,260," href="#" alt="filters" title="filters"   />
<area shape="poly" coords="424,423,444,446,490,460,546,464,599,460,632,448,641,437,639,395,628,359,618,334,611,327,617,318,628,256,613,240,601,234,580,230,556,229,543,229,515,230,489,234,469,238,450,253,456,314,460,324,446,348,433,381,426,402," href="#" alt="loupes" title="loupes" />
<area shape="poly" coords="625,287,629,255,616,238,616,168,609,163,610,149,621,145,642,143,647,139,659,137,678,134,702,134,721,136,736,142,736,155,731,159,724,258,722,269,709,273,695,284,677,292,655,292," href="#" alt="film" title="film" />
<area shape="poly" coords="315,93,318,205,361,208,379,220,417,223,448,218,510,222,558,220,574,207,583,163,591,150,591,129,597,102,588,85,587,77,579,75,567,72,565,64,563,62,559,55,548,50,538,47,528,30,519,23,505,22,477,21,443,21,432,23,397,36,388,59,344,62,337,70,323,83," href="#" alt="cameras" title="cameras" />
<area shape="poly" coords="115,175,160,181,173,180,187,183,230,186,259,182,281,154,284,117,270,101,251,92,229,86,203,85,132,83,113,95,98,109,89,133,100,156," href="#" alt="lenses" title="lenses" />
</map>
</div>

script.js

$(document).ready(function() {
    $("area").hover(function(){
        var thisTitle = $(this).attr("title");
        var thisBlurIndex = parseInt($("#" + thisTitle).attr("data-blurindex"));
        $("#photoframe .blurable").each(function(){
            var newBlurIndex = Math.abs(thisBlurIndex - parseInt($(this).attr("data-blurindex")));
            $(this).css("-webkit-filter","blur(" + newBlurIndex + "px)");
        });
    });
});

style.css

body {
    background-color: #3D5461;
}
/* added the transition as suggested by Jeroen Visser */
.blurable {
  -webkit-transition: -webkit-filter linear 1s;
}
#photoframe {
    position: relative;
    margin: 0 auto;
    width: 750px;
    height: 491px;
    overflow: hidden;
}
#photoframe img {
    position: absolute;
}
#full {
    -webkit-filter: blur(0px);
}
#fullblur {
    -webkit-filter: blur(10px);
}
#lenses {
    -webkit-filter: blur(8px);
}
#cameras {
    -webkit-filter: blur(6px);
}
#film {
    -webkit-filter: blur(4px);
}
#filters {
    -webkit-filter: blur(2px);
}
#loupes {
    -webkit-filter: blur(0px);
}