SO - 22622553

HTML

<div class="container">


				<ul class="stack stack-sidegrid">
					<li class="active"><img src="http://i0.wp.com/dribbble.s3.amazonaws.com/users/45881/screenshots/1139286/longshadow_mailicon.jpg?w=960" alt="img01"/></li>
					<li class="active"><img src="http://designwebkit.com/wp-content/uploads/2013/07/flat-design-examples-logo-20.jpg" alt="img03"/></li>
					<li class="active"><img src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2013/10/18.long-shadow-flat-logo.png" alt="img04"/></li>
					<li class="active"><img src="http://blog.karachicorner.com/wp-content/uploads/2013/08/longshadow-flat-design-20.jpg" alt="img02"/></li>
				</ul>
		
	
		</div>

CSS

.container > ul {
	width: 800px;
	height:400px;
	padding: 0;
	position: absolute;
	background:#0066FF;
}


.container > ul > li {
	max-width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	outline: 1px solid transparent;
}

.stack img:last-child {
	position: relative;
}


/* Side Grid */
.container > ul > li:first-child,
.container > ul > li:nth-child(2),
.container > ul > li:nth-child(3),
.container > ul > li:nth-child(4) {
	-webkit-transform: scale(0);
	transform: scale(0);
}

.container > ul > li:nth-child(4) {
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}

.container > ul > li:nth-child(3) {
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
}

.container > ul > li:nth-child(2) {
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

.container > ul > li:first-child {
	-webkit-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.container > ul > li.active {
	-webkit-transform: scale(0.48);
	transform: scale(0.48);
}
.container > ul > li.nonactive {
	-webkit-transform: scale(1);
	transform: scale(1);
}
.container > ul > li.current {
	z-index:99;
}
.container > ul > li.last {
	z-index:90;
}

JavaScript

$(document).ready(function(){
				$(".container ul li img").toggle(function() {
				$(".container ul li").removeClass("active current").addClass("");
				$(this).parent("li").removeClass("last").addClass("nonactive current");
				}, function() {
					$(".container ul li").removeClass("nonactive").addClass("active");
				});
			});