CodePen

HTML

            
              <figure>
  <img src="http://lorempixel.com/320/150/sports">
  <figcaption>
    <img src="http://cl.ly/image/1a3P2U1a3J17/Screen%20Shot%202013-01-15%20at%205.46.38%20PM.png">
  </figcaption>
</figure>
            
          
!

CSS

            
              body {
  padding: 1.5em;
}
figure {
  display: inline-block;
  position: relative;
  transition: .25s;
  transform: perspective(500px) rotateX(0deg) translateY(0px);
  transform-origin: 50% 50%;
  vertical-align: top;
}
figure:hover {
  transform: perspective(500px) rotateX(30deg) translateY(-30px);
}
figcaption {
  transition: .25s;
  transform: perspective(500px) rotateX(-90deg);
  transform-origin: 50% 0;
}
figure:hover figcaption {
  transform: perspective(500px) rotateX(-30deg);
}
img {
  vertical-align: top;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................