If you are using Google Plus then you must have noticed the photo stack effect when you view your own album or someone else album. In this tutorial, I will explain how you can achieve this effect powered by Jquery and CSS3. If you have not yet joined the bandwagon of Google Plus then you can request an invitation from a Google Plus Friend or use the link here.
The HTML Part
The first step will be to create our html page to place the album photo stack. The image tag with id photo1,photo2 and photo3 will contain three different images that will be placed on one another to make it appear like a stack. The image in the tag <ul> will be used to demonstrate the ‘zoom’ effect if an album contains only one photo.
<body>
<div id="page_wrap">
<div id="text"> Google Plus Album Photo</div>
<div class="photo_stack">
<img id="photo1" src="photos/1.jpg" >
<img id="photo2" src="photos/2.jpg" >
<img id="photo3" class="current" src="photos/3.jpg" > </div>
<div class="single_photo">
<ul id="pics">
<li><a href="#pic1" title="Photo"><img src="photos/3.jpg" alt="picture"></a></li>
</ul>
</div>
</div>
</body>
CSS Part : Stacked Photos
The page_wrap is the parent div that holds the whole content .
#page_wrap {
border: 1px solid #DDDDDD; // Add a grey border around the photos
width: 700px;
height:400px;
margin-left: auto;//center the content
margin-right: auto;
margin-top:150px;
}
.image_stack img {// image properties for the photos in the stack
border: none;
text-decoration: none;
position: absolute;
margin-left:0px;
width: 158px;
height: 158px;
}
.image_stack {
width: 400px;
position: absolute;
margin:60px 10px 10px ;
}
.image_stack img {// Image white frame/border
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;
/* Firefox */
-moz-transition: all 0.2s ease;
/* WebKit e.g chrome , safari*/
-webkit-transition: all 0.2s ease;
/* Opera */
-o-transition: all 0.2s ease;
/* Standard */
transition: all 0.2s ease;
}
The .image_stack #photo1 , .image_stack #photo2 and .image_stack #photo3 is used to position the three photos in such a way so that it looks like stack of photo pilled on one another .
.image_stack #photo1 {
top: 8px;
left: 108px;
}
.image_stack #photo2 {
top: 6px;
left: 104px;
}
.image_stack #photo3 {
top: 4px;
left: 100px;
}
The css class below is added via jquery when a user hover his mouse over the first image to give the photos a scattered effect .This css3 properties allows an image to rotate to the degree specified .
<a href="http://youhack.me/wp-content/uploads/2011/07/photo-stack-image3.png"><img class="aligncenter size-full wp-image-848" title="photo stack Rotate with css3" src="http://youhack.me/wp-content/uploads/2011/07/photo-stack-image3.png" alt="" width="593" height="578" /></a>
.image_stack .rotate1 {//photo 1
-webkit-transform: rotate(15deg);// for chrome or safari browser
-moz-transform: rotate(15deg);//firefox browser
transform: rotate(15deg);// Internet explorer
}
.image_stack .rotate2 {//photo 2
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
.image_stack .rotate3 {Photo 3
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
transform: rotate(-15deg);
cursor: pointer;
}
Javascript Code
The Jquery code below contains two events: one is fired when a user hovers his cursor over the image stacks and the other one when the cursor is moved away from it.
Basically, when a user hovers his cursor over the first image at the top of the photo stacks, the ‘mouse over’’ event is triggered and a set of css class is added to each of the photos to make it rotate a little so that it gives the effect as below.
When a user removes the cursor photo stacks, the css classes previously added is now removed so that each photo takes its original position.
$(document).ready(function() {//when page is fully loaded
$(".image_stack").delegate('img', 'mouseenter', function() {
//detect if cursor is hovering on an image which has a div with class name 'current
if ($(this).hasClass('current')) {
//attach the css class rotate1 , rotate2 and rotate3 to each image in the stack to rotate the images to specific degrees
var $parent = $(this).parent();
$parent.find('img#photo1').addClass('rotate1');
$parent.find('img#photo2').addClass('rotate2');
$parent.find('img#photo3').addClass('rotate3');
$parent.find('img#photo1').css("left","150px");//reposition the last and first photo
$parent.find('img#photo3').css("left","50px");
}
})
.delegate('img', 'mouseleave', function() {//if user removes curser on image
//remote all class previously added to give the photos it's initial position
$('img#photo1').removeClass('rotate1');
$('img#photo2').removeClass('rotate2');
$('img#photo3').removeClass('rotate3');
$('img#photo1').css("left","");
$('img#photo3').css("left","");
});;
});
CSS Part : Single Photos
- The CSS style below is applicable to single images. In this case, jquery is not used to produce the ‘zoom’ effect ,Only pure CSS 3 is used. When you hover your cursor over an image, it zooms in ’slowly’. The transition css property is responsible for the ‘easing’ of the zooming effect.
ul#pics li {
background: none repeat scroll 0 0 #FFFFFF;
box-shadow: 1px 1px 1px #999999;
display: inline-block;
width: 153px;
height:157px;
-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;
}
ul#pics li img {//define size of image
width: 150px;
height:150px;
display: block;
}
When a user hover his cursor over the image , the transform css3 property is used to make the image looks bigger and hence give the zooming effect .
ul#pics li:hover {
-moz-transform: scale(1.1) 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);
}
That’s all folks ! A demo is worth a thousand images . Don’t forget to check out the online demo ( see link at the top of the article) or download the script to test it locally on your pc.
Update on August 8th, 2011: Code has been updated so that more than one photo album can be displayed on a page (See Demo ).Thanks to Thomas and Shabeeb for pointing out this issue.
{ 3 trackbacks }
{ 34 comments… read them below or add one }
Hey Hyder, I love this effect. I was wondering if you have begun trying to recreate their galley grid? I’m trying to sort that out myself.
Thanks . can you provide me a link or screenshot of the gallery grid?I’m not too sure which part of google plus you are talking about .i’ll try to create the same in Jquery when i have some time :)
Just a quick tip: The link back from the Demo page goes to a 404 (07/14 instead of 07/15)
Thanks the demo link has been fixed :)
Very well explained tut. Beautiful effect.
Great !!! It would be awesome if someone can help with how to create multiple photo stacks.
@Shabeeb : what do you mean by multiple ? what are you trying to do actually ?
very well done
@Hider: I suspect @Shabeeb is talking about the fact that if you add more than one stack they all move together.
I fixed it by changing the ids to classes and looking for the images inside the container:
var $parent = $(this).parent();
$parent.find(‘img.photo1′).addClass(‘rotate1′);
$parent.find(‘img.photo2′).addClass(‘rotate2′);
…
@Thomas Thanks for pointing out this issue . code has been update . check out the demo :)
@Hyder
I mean a grid like this – http://cl.ly/022L2i35420S0D3r472D
Great ! have you managed to do it ? i might consider posting a tutorial how to do it next week ?
Any luck with this? How they’re laying out they’re gallery is a thing of beauty (which is more amazing that its coming from google) and would love to figure this out for a personal portfolio.
I’d like very much to read that tutorial of yours. It would be especially interesting how the grid layout is done for pictures of varying scales.
I’d love to find out some logic behind the grid lay-out as well, if anyone has figured it out. Have tried but can’t seem to wrap my head around it.
That tutorial would be great, if you can manage to put one up.
I’m looking for this, but I’m unsuccessfull. Did you manage to make something similar?
thx
I have implemented parts of the G+ gallery grid functionality and just created a post about it:
http://www.techbits.de/2011/10/25/building-a-google-plus-inspired-image-gallery/
At the end of the post you’ll find an example page for the grid using jQuery, maybe it helps.
You are awesome…. thats way i was looking for !!!
I’m happy that i helped you with my little knowledge on Jquery :) have a nice day !
Thank You for update ! I was stuck with the multiple albums thing.
Hi,
@Hyder, thanx again for update! Itryed this using IE9 and images do not rotate …
Thanks
-sanjay
ok I’ll see what’s wrong with IE tonight :)
Update : It now works with Internet Explorer 9 , Safari and Opera 11 as well !Actually the issue was quite simple to fix .there was no css3 style present for image rotation for IE 9 and Opera .
You may re download the files or view the demo in IE9 / Opera .Let me know if there’s any more issue :)
Gr8! …
Hello, great work!
However I would like to point that the single picture effect has some differences with the google behavior: on google page, zooming has a small delay so pictures are not zoomed immediately but they only show a shadow effect and after the mouse has been hover for a while, then they are zoomed.
Thanks for your work
Great effect and thanks for all your hard work.
Is it possible to get this working in IE8?
Hi Again
I read about something called modernizr which can add non css3 browser support – is there any way this could be implemented to provide better cross browser support?
it will only work in browsers supporting CSS3 since the code makes use this to achive the different effects.
Thanks a lot, I was searching for this, the only question I have is the what happens to non css 3 compatible browsers?
hi bro… there is no way to work in IE7? I’ve tested and does not work at all
@Alvito Cabral && Imperator : NO it does not since IE 7 Does not support CSS 3 . :)
If you try to add multiple such stacks, only one of them expands and collapses. Rest only expands but do not collapse…
So in the jquery for collapse handler, use similar code to first find the parent and then apply the removal of parameter.
Old
$(‘img#photo1′).removeClass(‘rotate1′);
Updated
var $parent = $(this).parent();
$parent.find(‘img#photo1′).removeClass(‘rotate1′);
Technically you don’t need the javascript at all. Instead of using jQuery to add a CSS class, just use the :hover selector. For example:
.image_stack:hover #photo1 {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
transform: rotate(15deg);
left: 150px;
}
Thanks for the information; I’ll visit the site again to get update information