图片层叠效果

The HTML

< div class = "stackone" >
   < img src = "http://lorempixum.com/200/200/city/7" >
</ div >

Basic Styles




* { margin : 0 ; padding : 0 ;}
body { background : #ccd3d7 ;}

Top Image Styles

.stackone { border : 6px solid #fff ; float : left ; height : 200px ; width : 200px ; margin : 50px ; position : relative ; -webkit-box-shadow: 2px 2px 5px rgba( 0 , 0 , 0 , 0.3 ); -moz-box-shadow: 2px 2px 5px rgba( 0 , 0 , 0 , 0.3 ); box-shadow: 2px 2px 5px rgba( 0 , 0 , 0 , 0.3 ); }

.stackone:before {
    content : "" ;
    height : 200px ; width : 200px ;
    background : #eff4de ;

    border: 6px solid #fff;

    position : absolute ;
    z-index : -1 ;
    top : 0px ;
    left : -10px ;
    -webkit-box-shadow: 2px 2px 5px rgba( 0 , 0 , 0 , 0.3 );
    -moz-box-shadow: 2px 2px 5px rgba( 0 , 0 , 0 , 0.3 );

    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);

    -webkit-transform: rotate( -5 deg);
    -moz-transform: rotate( -5 deg);
    -o-transform: rotate( -5 deg);
    -ms-transform: rotate( -5 deg);
    transform: rotate( -5 deg);
}