<figure class="fig1"> 
  <img src="//farm8.staticflickr.com/7040/6861180671_dfe596e3a0.jpg" alt="Ice Skating Fun"><!--width="500" height="401"-->
  <figcaption>
<pre><i>Ice Skating Fun</i> 
Noorderhaven, Groningen &#8211; the Netherlands
<a href="//www.flickr.com/photos/22746515@N02/6861180671/" title="Ice Skating Fun by Bert Kaufmann, on Flickr">photo</a> by <a href="http://www.flickr.com/photos/22746515@N02/">Bert Kaufmann</a></pre>
  </figcaption>
 </figure>

 <figure class="fig2"> 
   <img src="//farm8.staticflickr.com/7040/6861180671_dfe596e3a0.jpg" alt="Ice Skating Fun"> 
  <figcaption>
<pre><i>Ice Skating Fun</i> 
Noorderhaven, Groningen &#8211; the Netherlands
<a href="//www.flickr.com/photos/22746515@N02/6861180671/" title="Ice Skating Fun by Bert Kaufmann, on Flickr">photo</a> by <a href="//www.flickr.com/photos/22746515@N02/">Bert Kaufmann</a></pre>
  </figcaption>
 </figure>
 <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
 <filter id="blurEffect">
<feGaussianBlur stdDeviation="5"/>
</filter
 

/* 
* CSS-filter (blur) on image caption (on hover) for web-kit
* SVG-filter for Firefox

* This is a fork of a demo (presentation/slide) by Lea Verou: http://lea.verou.me/more-css-secrets/#slide52

* # RESOURCES 
* Lea Verou, "More CSS Secrets: ..." : https://www.youtube.com/watch?v=3ikye7Qc7Ak
* http://lea.verou.me/more-css-secrets/#intro
* https://www.html5rocks.com/en/tutorials/filters/understanding-css/
* https://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/
* https://html5-demos.appspot.com/static/css/filters/index.html
* https://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-detect-css-support-in-browsers-with-javascript/
* https://developer.mozilla.org/en-US/docs/Applying_SVG_effects_to_HTML_content
*/ 

* { 
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline; 
}
html {
  height: 100%;
  min-height: 100%;
  padding-bottom: 1px;
}
body {
  font: 100%/1.375 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Corbel, "Segoe Ui", "Trebuchet MS", Geneva, "Bitstream Vera Sans", "DejaVu Sans", Verdana, sans-serif; 
  background-color: #444;
  color: #fff;
  padding-bottom: 10em;
} 
ol, ul {
  list-style: none; 
} 
a {
  text-decoration: none;
  color: gold;
} 
.fig2 a {
  color: firebrick;
} 

figure {
  position: relative;
  width: 500px; 
  margin: 2em auto 8em;
  display: block; 
}
figcaption {
  position: absolute;
  z-index: 1;
  color: #111;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; 
}
.fig1 figcaption {
  overflow: hidden;
}

figcaption:before {
  position: absolute;
  z-index: -1;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background: url(//farm8.staticflickr.com/7040/6861180671_dfe596e3a0.jpg) 0 0 no-repeat;
} 

.fig1 figcaption:before { 
  clip: rect(310px,495px,396px,5px);
}

.fig2 figcaption:before {
  clip: rect(5px,495px,396px,5px);
  -webkit-filter: blur(5px); 
  filter: url("#blurEffect"); 
}

pre {
  font-size: 14px;
  font-family: Consolas, Monaco, "Courier New", Courier, monospace; 
  padding: 2em 5%; 
  -webkit-transition: margin 1s, color .5s;
  transition: margin 1s, color .5s;
}
.fig1 pre { 
  margin-top: 78%; 
  color: #eee;
}
.fig2 pre { 
  margin-top: 60%;
  color: #111;
}

img {
  max-width: 100%;
  margin: 0 auto; 
  display: block;
}

.fig1 .is-picture-hovered:before,
.fig1 figcaption:hover:before {
  -webkit-filter: blur(5px); 
  filter: url("#blurEffect"); 
}

.fig2 .is-picture-hovered:before,
.fig2 figcaption:hover:before {
  -webkit-filter: blur(0); 
}

.fig1 .is-picture-hovered pre,
.fig1 figcaption:hover pre {
  margin-top: 60%;
  color: #111;
}

.fig2 .is-picture-hovered pre,
.fig2 figcaption:hover pre {
  margin-top: 78%;
  color: #eee;
}

.fig1 .is-picture-hovered pre a,
.fig1 figcaption:hover pre a {
  color: firebrick;
}

.fig2 .is-picture-hovered pre a,
.fig2 figcaption:hover pre a {
  color: gold;
}

$('figcaption').mouseover(function(h){ 
 $('figcaption').toggleClass('is-picture-hovered'); 
});
$('figcaption').mouseout(function(i){ 
 $('figcaption').removeClass('is-picture-hovered'); 
});