CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-plus
Adam Ramadhan
Adam Ramadhan

Reputation: 22810

google plus photo animation with css3 or jquery?

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

Upvotes: 1

Views: 886

Answers (3)

Hyder B.
Hyder B.

Reputation: 12226

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

  2. For stack and animate, you should use CSS3 and jQuery.

Upvotes: 4

tommica
tommica

Reputation: 132

Is this something you are looking for?

Upvotes: 0

configurator
configurator

Reputation: 41640

On my machine using Chrome, I see a CSS3 -webkit-transform. Since that's the only transform they're using, it must be detecting that my browser is webkit and choosing the right way to transform. They probably have various other techniques for other browsers.

However, there's no jQuery fallback, as the page doesn't use jQuery; there's probably a different JavaScript fallback developed by Google though.

Upvotes: 2

Related Questions