Uno de los recursos para desarrollo web que hablo frecuentemente por ser éstos sencillos de implementar y elegantes, son las galerías/slideshow de imágenes que utilizan alguna biblioteca como jQuery o Mootools. En Dyanmic Drive publicaron una galería imágenes que no sólo es muy vistosa, sino que sin dudas es la más sencilla de implementar.
CSS3 Hover Image Gallery es un galería de imágenes que las muestra de un tono más suave y que al pasar el puntero del mouse sobre alguna de ellas, se muestra en su color original y la imagen se agranda, algo similar al popular efecto Lightbox.
El código CSS para implementar es así de sencillo:
<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*/
}
El código HTML es tan sólo:
<div class=»hovergallery»>
<img src=»coconut.jpg» />
<img src=»sunbreakthrough.jpg» />
<img src=»desert.jpg» />
<img src=»sunflower.jpg» />
<img src=»forest.jpg» />
<img src=»duck.jpg» />
</div>
CSS3 Hover Image Gallery es un claro ejemplo de las ventajas y el grado de simplificación que se logra en los desarrollos web con la tecnología que aportan HTML5 y CSS3.
CSS3 Hover Image Gallery
Sitio: www.dynamicdrive.com/style/csslibrary/item/css3_hover_image_gallery
