Simple CSS3 gallery with zoom effect

This is a rather simple example of how to create a gallery using CSS3 animation.

Properties transform, transition-duration and box-shadow are used here.

If a cursor hovers over an image, the image is zoomed smoothly.

The gallery works well in browsers: Chrome, Safari 4+, Opera 9.5+, FF 4+. Unfortunately IE doesn't support the animation. It might work but only partially.

HTML code

<div id="gallery">
  <img alt="" src="nature1.jpg" />
  <img alt="" src="nature2.jpg" />
  <img alt="" src="nature3.jpg" />
  <img alt="" src="nature4.jpg" />
  <img alt="" src="nature5.jpg" />
  <img alt="" src="nature6.jpg" />
  <img alt="" src="nature7.jpg" />
  <img alt="" src="nature8.jpg" />
</div>

CSS code

#gallery {
  text-align: center;
  width: 610px;
  margin: 70px auto;
}

#gallery img {
  width: 300px;
  -webkit-transition-duration: 0.6s; /*Webkit: animation duration*/
  -moz-transition-duration: 0.6s; /*Mozilla: animation duration*/
  -o-transition-duration: 0.6s; /*Opera: animation duration*/
  opacity: 0.6; /*initial opacity of the image*/
  z-index: 1; /*place non-hover images behind the hover image*/
  margin: 0; /*remove default margin for images*/
  position: relative; /*solve the problem with z-index in Chrome*/
}

#gallery img:hover { 
  -webkit-transform: scale( 1.5 ); /*Webkit: increase size to 1.5x*/
  -moz-transform: scale( 1.5 ); /*Mozilla: scaling*/
  -o-transform: scale( 1.5 ); /*Opera: scaling*/
  box-shadow: 0px 0px 25px gray; /*CSS3 shadows: 25px fuzzy shadow around the entire image*/
  -webkit-box-shadow: 0px 0px 25px gray; /*Webkit: shadows*/
  -moz-box-shadow: 0px 0px 25px gray; /*Mozilla: shadows*/
  opacity: 1; /*default opacity*/
  z-index: 10; /*place hover image in front the non-hover images*/
}

Live demo