CSS Shader effect experimental. Playraround at Adobe Filter Lab: http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab

index.haml

#cat 
  %img{:alt => "cat", :src => "http://placekitten.com/500/333", :width => "500"}/

script.js

/*--------------------------------------* 
 | fullscreen view:                     |
 |  http://codepen.io/vinhnx/full/takcj |
 *--------------------------------------*/

/*----------------------------------------------------
 * Copyright 2012 Adobe Systems, Incorporated
 * This work is licensed under a Creative Commons 
 * Attribution-Noncommercial-Share Alike 3.0 Unported
 * License http://creativecommons.org/licenses/by-nc-sa/3.0/.
 *
 * Permissions beyond the scope of this license,
 * pertaining to the examples of code included within 
 * this work are available at Adobe
 * http://www.adobe.com/communities/guidelines/ccplus/commercialcode_plus_permission.html .
 *--------------------------------------------------*/

/* BROWSERS SUPPORT: CSS SHADERS
This is currently cutting-edge, so it's only available in the latest Google Chrome Canary and WebKit nightly. To enjoy the full experience you'll need to turn a few knobs.

* Chrome Canary steps:
* + Type about:flags in the browser's navigation bar
* + Find "Enable CSS Shaders". Enable it
* + Relaunch the browser

* WebKit nightly steps
* + Download and install WebKit nightly for Mac OSX
* + Open the browser's preferences panel. Go to Advanced tab and tick to show Develop > Enable WebGL menu in the menu bar.
* + In the browser's menu bar select Develop

* Mode details: http://updates.html5rocks.com/2012/09/Interactive-Globe-with-CSS-shaders-Google-Maps
*/

style.css

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  min-height: 100%;
  font-size: 100%;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  -webkit-animation: blurIn ease-in 2s normal;
     -moz-animation: blurIn ease-in 2s normal;
      -ms-animation: blurIn ease-in 2s normal;
       -o-animation: blurIn ease-in 2s normal;
          animation: blurIn ease-in 2s normal;
}

body {
  background: radial-gradient(center 0, circle cover, #787571, #242424) no-repeat;
  background-color: #242424;
  height: 100%;
}

#cat {
  position: relative;
  left: calc(32%);
  top: calc(17%);
  width: 500px;
  height: 333px;
  -webkit-box-reflect: below 10px -webkit-linear-gradient(transparent 0%, rgba(255, 255, 255, 0.2) 100%);
  -webkit-box-shadow: 1px 7px 8px #222222;
  -moz-box-shadow: 1px 7px 8px #222222;
  box-shadow: 1px 7px 8px #222222;
  -webkit-transition-duration: 150ms;
  -moz-transition-duration: 150ms;
  transition-duration: 150ms;
}

#cat:hover {
  -webkit-filter:   custom(url(http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/shaders/vertex/fold.vs)    mix(url(http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/shaders/fragment/fold.fs) multiply source-atop), 
    40 8 border-box, 
    transform perspective(1000) scale(1) rotateX(0deg) rotateY(-30deg) rotateZ(0deg), 
    t 0.5, 
    spins 1.5, 
    phase -0.7, 
    shadow 1.5, 
    mapDepth 40, 
    mapCurve -0.3,
    minSpacing 0.3, 
    useColoredBack 1, 
    backColor 0.5 0.5 0.5 1);
}

#cat:after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 0;
  -webkit-background-origin: border-box;
  -moz-background-origin: border;
  background-origin: border-box;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
  background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
}

@-webkit-keyframes blurIn {
  from {
    -webkit-filter: blur(10px);
  }
  to {
    -webkit-filter: blur(0px);
  }
}

@-moz-keyframes blurIn {
  from {
    -webkit-filter: blur(10px);
  }
  to {
    -webkit-filter: blur(0px);
  }
}

@-o-keyframes blurIn {
  from {
    -webkit-filter: blur(10px);
  }
  to {
    -webkit-filter: blur(0px);
  }
}

@keyframes blurIn {
  from {
    -webkit-filter: blur(10px);
  }
  to {
    -webkit-filter: blur(0px);
  }
}