Galería con CSS efecto hover

¿Recuerdan la galería Fancy Thumbnail? fue una idea de SOHTANAKA a la que decidí hacer unos cambios porque era necesario disponer de un generoso espacio para mostrarla.

En Dynamic Drive tenemos la solución para conseguir el mismo efecto con CSS, lo podemos conseguir con cualquier cantidad de imágenes y unos simples pasos.

¿Inconvenientes? Sólo se visualiza en Chrome, Safari 4+, Opera 9.5+ y FF 3.6
En plantilla Edición de HTML justo después de ]]></b:skin>

<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.hovergallery 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*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.hovergallery 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*/
opacity: 1;
}
</style>

Entrada o gadget de HTML que vamos a mostrar las imágenes.

<div class="hovergallery">
<img src="url-imagen-1"/>
<img src="url-ímagen-2"/>
<img src="url-imagen-3"/>
<img src="url-imagen-4"/>
</div>