Efecto Imágenes Apiladas con CSS

Codigo Html:

<div class="separator"><a href="javascript:void();">
<img src="URL_IMAGEN" />
</a></div>

Codigo CSS:

.separator {
margin: 20px;
text-align: center;
clear: both;
}
.separator a {
display: table;
position: relative;
z-index: 10;
max-width: 94% !important;
margin: 10px auto !important;
}
.separator img { 
display: table-cell;
max-width: 100% !important;
padding: 15px;
background: #fff;
-webkit-box-shadow: 0 1px 5px #999;
-moz-box-shadow: 0 1px 5px #999;
box-shadow: 0 1px 5px #999;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; 
box-sizing: border-box;
}
.separator a:before, .separator a:after {
content: ""; 
display: block;
position: absolute; 
top: -5px;
left: 0;
width: 100%;
height: 100%;
background: white;
-webkit-box-shadow: 0 1px 5px #999;
-moz-box-shadow: 0 1px 5px #999;
box-shadow: 0 1px 5px #999;
-webkit-transition: .3s all;
-moz-transition: .3s all;
transition: .3s all;
}
.separator a:before {
z-index: -2;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
transform: rotate(2deg);
}
.separator a:after {
z-index: -3;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
transform: rotate(-3deg);
}

About TWN

Tecnología Web y Noticias. Podrás encontrar una gran variedad de cosas sobre el mundo Tecnológico.