Css3 stacks dengan pseudo elements

DEMO  

CSS/* Need a Dribbble invite :) 
http://dribbble.com/Bartos_Lazarski */

body{
background: url(http://subtlepatterns.com/patterns/tex2res5.png);
}
.group {
margin:20px;
}
/*
Stacks CSS -- */

/* Layout */
.stack { float: left; width: 22%; margin: 0 4% 4% 0; position: relative; z-index: 10; }

/* Image styles */
.stack img { max-width: 100%; height: auto; vertical-align: bottom; border: 10px solid #fff; border-radius: 3px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.stack:last-of-type { margin-right: 0; }

/* Stacks creted by the use of generated content */
.stack:before, .stack:after { content: ""; border-radius: 3px; width: 100%; height: 100%; position: absolute; border: 10px solid #fff; left: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
 -webkit-transition: 0.3s all ease-out;
 -moz-transition: 0.3s all ease-out;
 transition: 0.3s all ease-out;
}
.stack:before { top: 4px; z-index: -10; } /* 1st element in stack (behind image) */ 
.stack:after { top: 8px; z-index: -20; } /* 2nd element in stack (behind image) */

/* Second stack example (rotated to the right from the bottom left) */
.stack.rotated:before { 
 -webkit-transform-origin: bottom left;
 -moz-transform-origin: bottom left;
 transform-origin: bottom left;
 -webkit-transform: rotate(2deg);
 -moz-transform: rotate(2deg);
 transform: rotate(2deg);
}
.stack.rotated:after { 
 -webkit-transform-origin: bottom left;
 -moz-transform-origin: bottom left;
 transform-origin: bottom left;
 -webkit-transform: rotate(4deg);
 -moz-transform: rotate(4deg);
 transform: rotate(4deg);
} 

/* Third stack example (One stack element rotated in the opposite direction) */
.stack.twisted:before {
 -webkit-transform: rotate(4deg);
 -moz-transform: rotate(4deg);
 transform: rotate(4deg);
} 
.stack.twisted:after {
 -webkit-transform: rotate(-4deg);
 -moz-transform: rotate(-4deg);
 transform: rotate(-4deg);
} 

/* Fourth stack example (Similar to the second but rotated left) */
.stack.rotated-left:before {
 -webkit-transform-origin: bottom left;
 -moz-transform-origin: bottom left;
 transform-origin: bottom left;
 -webkit-transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
 transform: rotate(-3deg);
}
.stack.rotated-left:after {
 -webkit-transform-origin: bottom left;
 -moz-transform-origin: bottom left;
 transform-origin: bottom left;
 -webkit-transform: rotate(-6deg);
 -moz-transform: rotate(-6deg);
 transform: rotate(-6deg);
}

/* Reset all rotations on hover */
.stack:hover:before, .stack:hover:after {
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 transform: rotate(0deg);
}

/*
iPhone and mobile widths --------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 320px) and (max-width: 480px) {
 .stack { float: none; width: auto; margin-bottom: 35px; }
 h1.title { margin: 15px 0; }
}

HTML<div class="group">                
         <div class="stack"> 
          <img src="http://picbox.im/image/40382b2ed0-image1.jpg" alt="" />
         </div>
         <div class="stack rotated"> 
          <img src="http://picbox.im/image/e978a34cdd-image2.jpg" alt="" />
         </div>
         <div class="stack twisted"> 
          <img src="http://picbox.im/image/701845e85d-image3.jpg" alt="" />
         </div>
         <div class="stack rotated-left"> 
          <img src="http://picbox.im/image/fb2d3edc2b-image4.jpg" alt="" />
         </div>
  </div>