Imagenes con efecto Zoom en Blogger

En esta oportunidad les compartire un gran truco en el cual las imagenes del blog quedan con un genial efecto zoom al pasar el cursor sobre ellas, este genial truco se logra mediante CSS.

Aqui puedes ver una vista previa del truco.

Para agregar este truco pega el siguiente CSS antes de ]]></b:skin> :

/* 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;
}

En el anterior codigo vienen incluidas algunas lineas para explicar un poco el contenido del CSS.

Ahora agrega el siguiente HTML en la parte que quieras (puede ser un elemento HTML/JavaScript)

<div class=»expandir»>
<ul>
<li><a href=»URL_Destino1«><img src=»IMAGEN1«/><span>TEXTO1</span></a></li>
<li><a href=»URL_Destino2«><img src=»IMAGEN2«/><span>TEXTO2</span></a></li>
<li><a href=»URL_Destino3«><img src=»IMAGEN3«/><span>TEXTO3</span></a></li>
</ul>
</div>

Lo que se indica en verde corresponde a la URL del destino,a la URL de la imagen y el texto a mostrar.

Para agregar otras imagenes solo debes añadir la siguiente estructura (antes de </ul>)  :

 <li><a href=»URL_Destino«><img src=»IMAGEN«/><span>TEXTO</span></a></li>

Espero que les haya sido de utilidad este truco y sigan visitando Mil Trucos Blogger.

Via/Oloblogger