A CodePen by Emanual Jade. IOS7 Parallax Background - Hover over image for effect. A little experiment. Inspired by the iOS7 Parallax background. Simulating that effect using css transitions and transforms.

index.html

<div id="page">
<div class="display">
  <img src="http://s.cdpn.io/49110/3312220585_ca1d28b908_o.jpg" />
  <div class="icons">
    
    <div class="icon right top"></div>
    <div class="icon right"></div>
    <div class="icon left"></div> 
    <div class="icon left"></div> 
    
    <div class="icon right"></div> 
    <div class="icon right"></div> 
    <div class="icon left"></div> 
    <div class="icon left"></div>
      
    <div class="icon right"></div> 
    <div class="icon right"></div> 
    <div class="icon left"></div> 
    <div class="icon left"></div> 
      
    <div class="icon right"></div> 
    <div class="icon right"></div> 
    <div class="icon left"></div> 
    <div class="icon left"></div> 
    
    <div class="icon right bottom"></div> 
    <div class="icon right"></div> 
    <div class="icon left"></div> 
    <div class="icon left"></div>
  </div>
</div>
</div>

script.js

$(function(){
  function getCoordinates(elem, e){
    var cor = {};
    var parentOffset = $(elem).offset(); 
    var relX = e.pageX - parentOffset.left;
    var relY = e.pageY - parentOffset.top;
    return cor = {
      x: relX,
      y: relY
    }
  }
  var $page = $('#page');
  $('.display').on('mousemove', function(e){  
    cor = getCoordinates(this, e);
    if(cor.y < 320){
     $page.removeClass('bottomer').addClass('topper'); 
    }
    if(cor.y > 360){
      $page.removeClass('topper').addClass('bottomer'); 
    }
    if(cor.y > 320 && cor.y < 360){
    $page.removeClass('bottomer topper'); 
    }
    
    if(cor.x < 150){
     $page.removeClass('left').addClass('right'); 
    }
    if(cor.x > 180){
     $page.removeClass('right').addClass('left');
    }
    if(cor.x > 150 && cor.x < 180){
    $page.removeClass('left right');
    }
    
  }).on('mouseleave', function(){
    $page.removeClass();
  });

});

style.css

#page{
 -webkit-perspective: 1500px;
}
.display{
  width: 320px;
  height: 480px;
  margin: 20px auto;
  overflow: hidden;
  position: relative;
  border-left: 14px solid #000;
  border-right: 14px solid #000;
  border-top: 98px solid #000;
  border-bottom: 98px solid #000;
  border-radius: 25px;
  -webkit-transition: all .5s;
  -webkit-backface-visibility: hidden;
}
.right .display{
  -webkit-transform: rotateY(-12deg);
}
.left .display{
  -webkit-transform: rotateY(12deg);
}
.topper .display{
  -webkit-transform: rotateX(12deg);
}
.topper.right .display{
  -webkit-transform: rotateX(12deg) rotateY(-12deg);
}
.topper.left .display{
  -webkit-transform: rotateX(12deg) rotateY(12deg);
}
.bottomer .display{
  -webkit-transform: rotateX(-12deg);
}
.bottomer.right .display{
  -webkit-transform: rotateX(-12deg) rotateY(-12deg);
}
.bottomer.left .display{
  -webkit-transform: rotateX(-12deg) rotateY(12deg);
}
.display img{
  width: 350px;
  height: auto;
  position: absolute;
  top: -15px;
  left: -15px;
  z-index: 0;
  -webkit-transition: all .5s;
  -webkit-backface-visibility: hidden;
}
.right .display img{
  -webkit-transform: translate3d(15px, 0, 0);
}
.left .display img{
  -webkit-transform: translate3d(-15px, 0, 0);
}
.topper .display img{
  -webkit-transform: translate3d(0, 15px, 0);
}
.topper.right .display img{
  -webkit-transform: translate3d(15px, 15px, 0);
}
.topper.left .display img{
  -webkit-transform: translate3d(-15px, 15px, 0);
}
.bottomer .display img{
  -webkit-transform: translate3d(0, -15px, 0);
}
.bottomer.right .display img{
  -webkit-transform: translate3d(15px, -15px, 0);
}
.bottomer.left .display img{
  -webkit-transform: translate3d(-15px, -15px, 0);
}
.icon{
  position: relative;
  margin: 18px 11px;
  width: 57px;
  height: 57px;
  float: left;
  background: #CFCFCF;
  border-radius: 13px;
  z-index: 2;
}