google plus photo animation with css3 or jquery?

Problem

so heres the animation

enter image description here

into

enter image description here

and this one

enter image description here

how can they do that? 1. re-size animation 2. stack and animate.

just CSS3 ? any example?

Thanks

Adam Ramadhan

Problem courtesy of: Adam Ramadhan

Solution

To answer your question:

  1. To resize and make image animate ( zoom in effect ) you should use something like :
  • 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); }
  1. For stack and animate, you should use CSS3 and jQuery.

Solution courtesy of: Hyder B.

View additional discussion.