Google Plus Photo Album

1. HTML for Google Plus Photo Album

<div id="page_wrap">  
  
	<div class="google-plus" style="margin-left:490px">
		<img class="album" src="photos/2.jpg">
		<img class="album" src="photos/3.jpg">
		<img class="album"  src="photos/1.jpg"> 
	</div>    
	<div class="google-plus" style="margin-left:200px">
		<img class="album" src="photos/4.jpg">
		<img class="album" src="photos/5.jpg">
		<img class="album"  src="photos/6.jpg"> 
     </div>
     
  <div class="single-photo">
    <a href="#pic1" title="Photo"><img src="photos/3.jpg" alt="picture">    
  </div>

2. CSS for Google Plus Photo Album

<style type="text/css">
.single-photo
{
	background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    display: inline-block;
    height: 164px;
    margin-left: 33px;
    margin-top: 65px;
    width: 165px;
	 -webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	
}
.single-photo img
{
	display: block;
    height: 158px;
    padding-left: 3px;
    padding-top: 3px;
    width: 158px;
}
.single-photo:hover
{
	-moz-transform: scale(1.2, 1.2) rotate(0deg);
	-webkit-transform: scale(1.1) rotate(0deg);
	-o-transform: scale(1.1) rotate(0deg);
	-ms-transform: scale(1.1) rotate(0deg);
	transform: scale(1.1) rotate(0deg);
}
#page_wrap {
	border: 1px solid #DDDDDD;
	width: 800px;
	height:400px;
	margin-left: auto;
	margin-right: auto;
	margin-top:150px;
}
.google-plus img { 
	border: none;
	text-decoration: none;
	position: absolute;
	margin-left:0px;
	width: 158px;
	height: 158px;
}
.google-plus { 
	width: 400px;
	position: absolute;
	margin:60px 10px 10px;
}
.google-plus img { 
	position: absolute;
	border: 4px solid #FFF;
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	z-index: 9999;	
	-moz-transition: all 0.2s ease;	
	-webkit-transition: all 0.2s ease;	
	-o-transition: all 0.2s ease;	
	transition: all 0.2s ease;
}
.google-plus img:nth-child(1)
{ 
	top: 8px;
	left: 108px;
}
.google-plus img:nth-child(2)
{
	top: 6px;
	left: 104px;
}
.google-plus img:nth-child(3)
{
	top: 4px;
	left: 100px;
	right: 100px;
}
.google-plus .rotate1 {
	-webkit-transform: rotate(15deg); 
	-moz-transform: rotate(15deg);
	transform: rotate(15deg);
	-ms-transform:rotate(15deg);
	-o-transform:rotate(15deg);
}
.google-plus .rotate2 {
	-webkit-transform: rotate(0deg); 
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
	-ms-transform:rotate(0deg); 
	-o-transform:rotate(0deg); 
}
.google-plus .rotate3 {
	-webkit-transform: rotate(-15deg); 
	-moz-transform: rotate(-15deg); 
	transform: rotate(-15deg);
	-ms-transform:rotate(-15deg); 
	-o-transform:rotate(-15deg);
	cursor: pointer;
}
</style>

3.Javascript Code

jQuery(document).ready(function()
{ 	
	jQuery(".google-plus img").hover(function(){
		
		if(jQuery(this).hasClass('album'))
		{
			var parent = jQuery(this).parent();
			
			parent.find("img:nth-child(1)").addClass(" rotate1");			
						
			parent.find("img:nth-child(2)").addClass(" rotate2");
			parent.find("img:nth-child(3)").addClass(" rotate3");
			
			parent.find("img:nth-child(1)").css('left', '150px');
			parent.find("img:nth-child(3)").css('left', '50px');
		}
	},
	function(){
			
			var parent = jQuery(this).parent();
			parent.find("img:nth-child(1)").removeClass("rotate1");
			parent.find("img:nth-child(2)").removeClass("rotate2");
			parent.find("img:nth-child(3)").removeClass("rotate3");
			
			parent.find("img:nth-child(1)").css('left', '');
			parent.find("img:nth-child(3)").css('left', '');
	});	

});