Post image for Google Plus Photo stack animation using Jquery and CSS3

Google Plus Photo stack animation using Jquery and CSS3

by Hyder on July 15, 2011

in Jquery

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.

Related Posts

  1. Google Plus Click Animation effect on Stream Page using Jquery
  2. Facebook and Google Plus style of introducing new features using jQuery
  3. Create an Apple Itunes-like banner rotator/slideshow with jQuery
  4. Create Google Plus-Style Button using CSS3
After Post

{ 3 trackbacks }

Google Plus Click Animation effect on Stream Page using Jquery
July 15, 2011 at 12:30 pm
Google Plus Blog » Blog Archive » g+ Photo-Album Effekt in CSS & JQuery / g+ Icon-Sets
July 17, 2011 at 12:12 pm
Weekly Design News – Resources, Tutorials and Freebies (N.96)
July 26, 2011 at 9:00 am

{ 34 comments… read them below or add one }

Kurt July 17, 2011 at 7:11 am

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.

Reply

Hyder July 17, 2011 at 11:27 am

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 :)

Reply

JussaTip July 20, 2011 at 10:55 am

Just a quick tip: The link back from the Demo page goes to a 404 (07/14 instead of 07/15)

Reply

Hyder July 20, 2011 at 2:00 pm

Thanks the demo link has been fixed :)

Reply

Maicon Sobczak July 28, 2011 at 2:16 pm

Very well explained tut. Beautiful effect.

Reply

Shabeeb July 31, 2011 at 4:32 pm

Great !!! It would be awesome if someone can help with how to create multiple photo stacks.

Reply

Hyder August 4, 2011 at 5:34 am

@Shabeeb : what do you mean by multiple ? what are you trying to do actually ?

Reply

neosajith August 1, 2011 at 11:51 pm

very well done

Reply

Thomas August 3, 2011 at 7:11 pm

@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′);

Reply

Hyder August 4, 2011 at 5:32 am

@Thomas Thanks for pointing out this issue . code has been update . check out the demo :)

Reply

KurtVachon August 3, 2011 at 7:12 pm

@Hyder

I mean a grid like this – http://cl.ly/022L2i35420S0D3r472D

Reply

Hyder August 4, 2011 at 5:33 am

Great ! have you managed to do it ? i might consider posting a tutorial how to do it next week ?

Reply

ChadVanWalsum August 10, 2011 at 5:24 pm

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.

Reply

Hendrik August 13, 2011 at 12:03 pm

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.

Reply

Johnson August 16, 2011 at 4:24 am

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.

Reply

Fernet September 24, 2011 at 11:13 am

I’m looking for this, but I’m unsuccessfull. Did you manage to make something similar?
thx

Reply

Florian October 25, 2011 at 9:18 pm

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.

Reply

Shabeeb August 4, 2011 at 4:24 pm

You are awesome…. thats way i was looking for !!!

Reply

Hyder August 4, 2011 at 5:26 pm

I’m happy that i helped you with my little knowledge on Jquery :) have a nice day !

Reply

sanjay August 4, 2011 at 9:51 pm

Thank You for update ! I was stuck with the multiple albums thing.

Reply

sanjay August 4, 2011 at 11:52 pm

Hi,
@Hyder, thanx again for update! Itryed this using IE9 and images do not rotate …

Thanks
-sanjay

Reply

Hyder August 5, 2011 at 5:42 am

ok I’ll see what’s wrong with IE tonight :)

Reply

Hyder August 6, 2011 at 7:35 am

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 .

-ms-transform:rotate(0deg); /* Internet Explorer 9 */
-o-transform:rotate(0deg); /* Opera */

You may re download the files or view the demo in IE9 / Opera .Let me know if there’s any more issue :)

Reply

sanjay August 13, 2011 at 1:05 am

Gr8! …

Reply

Spuas August 19, 2011 at 8:49 am

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

Reply

timbly September 29, 2011 at 3:58 pm

Great effect and thanks for all your hard work.
Is it possible to get this working in IE8?

Reply

timbly September 29, 2011 at 4:31 pm

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?

Reply

Hyder September 30, 2011 at 7:21 am

it will only work in browsers supporting CSS3 since the code makes use this to achive the different effects.

Reply

Alvito Cabral October 13, 2011 at 7:31 am

Thanks a lot, I was searching for this, the only question I have is the what happens to non css 3 compatible browsers?

Reply

Imperator November 14, 2011 at 7:46 pm

hi bro… there is no way to work in IE7? I’ve tested and does not work at all

Reply

Hyder November 15, 2011 at 5:10 am

@Alvito Cabral && Imperator : NO it does not since IE 7 Does not support CSS 3 . :)

Reply

Nitin March 16, 2012 at 2:06 pm

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′);

Reply

Nathan April 11, 2012 at 5:23 am

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;
}

Reply

FABIR September 13, 2012 at 7:52 am

Thanks for the information; I’ll visit the site again to get update information

Reply

Leave a Comment

Previous post:

Next post: