Menú gráfico con efecto zoom – School – cancer ~ CosasParaMiBlogs

Esta sería una de las muchas maneras con las que podemos construir un menú con imágenes que lleva incorporado un efecto zoom (fish eye, ojo de pez).

Los distintos elementos se dispondrán en una lista que contendrá las distintas imágenes y sus respectivos enlaces. Dentro de cada enlace incluiremos de manera adicional unspan con un pequeño texto que acompañará a cada uno de ellos.

En este caso el texto permanecerá inicialmente oculto y al hacerhover en cualquiera de las miniaturas, será cuando estas se agranden hasta su tamaño original y simultáneamente aparece el texto en su base. Se supone que este texto será el alusivo al destino, pero puede ser utilizado para cualquier otro fin.

El resultado sería algo como esto:

Para conseguirlo habrá que generar algo de CSS a incluir en nuestra plantilla (entre las etiquetasSKIN en el caso de Blogger) y un HTML con determinada estructura.

Esta es la parte de estilo y he añadido directamente en el código unos comentarios queintentan explicar que hace cada parte:

/* Contenedor general y reset de margin y padding */
.expandir * {
margin: 0;
padding: 0;
}
.expandir {
font-family:Arial, Helvetica, sans-serif;
line-height:normal;
margin:20px auto 30px;
height:80px;
width:530px;
}
/* Las imágenes irán en forma de lista */
.expandir ul {
padding-top:10px;
margin-left:10px;
}
/* Se hacen flotar los elementos para que queden en línea y se elimina el estilo que podría haber predefinido para listas */
.expandir ul li {
float:left;
list-style-type:none;
}
/* Anulamos estilo predifinido para enlaces en listas */
.expandir ul li a {
text-decoration:none;
}
/* Estilo de cada imagen en situación inicial y transición suave */
.expandir ul li a img {
width:32px; /* Ancho inicial imagénes. 50% real */
height:32px; /* Alto inicial imagénes. 50% real */
border:none;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
transition: all .3s ease-in;
}
/* El texto que acompaña a las imágenes no se ve inicialmente */
.expandir ul li a span {
display:none;
}
/* Mostramos el texto al hacer hover */
.expandir ul li:hover a span {
display:block;
font-size:14px;
text-align:center;
color:#000;
}
/* Agrandamos la imagen al hacer hover */
.expandir ul li:hover a img {
width:64px;
height:64px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

Y este sería el HTML. Como he comentado al principio sólo se trata de una lista ordenada de imágenes con enlaces y un span añadido dentro de estos últimos:

div class="expandir"
ul
lia href="URL_Destino1"img src="IMAGEN1"/spanTEXTO1/span/a/li
lia href="URL_Destino2"img src="IMAGEN2"/spanTEXTO2/span/a/li
lia href="URL_Destino3"img src="IMAGEN3"/spanTEXTO3/span/a/li
/ul
/div

Otro ejemplo a modo de galería de imágenes: