Your rating has been changed, thanks for rating!

You have already rated this page, you can only rate it once!

Thank you for rating!

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