<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);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js