<figure class="stack"><img src="https://f.cl.ly/items/0k1G1q2V3a3e0P0N3K31/codepen_imagestack.jpg" width="600" height="600" /></figure>
body { background: #e0e8dc; text-align: center; padding: 10% 1em 0; }
.stack {
display: block;
width: 600px;
height: auto;
margin: 0 auto;
position: relative;
z-index: 1;
}
.stack img {
width: 100%;
height: auto;
vertical-align: bottom;
border: 10px solid #fff;
-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:before,
.stack:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
border: 40px 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);
}
.stack:before {
top: 2px;
z-index: -10;
-webkit-transform: rotate(2.2deg);
-moz-transform: rotate(2.2deg);
transform: rotate(2.2deg);
}
.stack:after {
top: 2px;
z-index: -20;
-webkit-transform: rotate(-2.2deg);
-moz-transform: rotate(-2.2deg);
transform: rotate(-2.2deg);
}
This Pen doesn't use any external CSS resources.