Skip to content

Instantly share code, notes, and snippets.

@ricardovf

ricardovf/index.html

Created October 23, 2012 13:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ricardovf/3938698 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ricardovf/3938698 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by vcurd. Depth of field effect with SVG filters - Depth of field effect on hover. Based on PNGs with alpha transparency and SVG filters in CSS3. Currently only works in Chrome.
Raw
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>
Raw
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)");
});
});
});
Raw
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment