Question

I have a div container which have several images,like this:

<div style="width:600px;height:600px;>
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
</div>

And the image inside the div all have the same size.

Now when the div is mousescrolled,I want to replace the src of the images,during the replacment,I want to make the animation.(make the images zoom in / out).

In fact,you should have guess that what I want is much like the zoom animation of google map when you scroll on the maps.

Any suggestion?

======================================
update:

1)for single image,I know how to make the zoom animation either by js or css3.

However,the images inside the div are continuous in their content. Just like the tile in the goole map.

So I have to keep this continuous during the animation,for example,when the image are both scaled by 1.1,then their position must be rechanged to keep the continuous of their contents.

2) I have to support ie7+

Answer 1

This code works in all modern browsers except IE. Since, it is css3 solution.

http://www.dynamicdrive.com/style/csslibrary/item/css3_hover_image_gallery/

img {
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
}

img:hover {
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
}