AMPLIAR IMAGEN CON CURSOR ENCIMA

Este recurso consiste en ampliar una imagen simplemente poniendo el cursor encima, se ampliará sin necesidad de hacer click en la imagen como normalmente estamos acostumbrados. Este recurso que nos permite hacer CSS viene especialmente bien para imagenes pequeñas o simplemente para llamar la atención de los visitantes, para insertarlo en vustro blog tan solo tendréis que seguir los siquientes pasos.

Primer paso:(Copia del estilo)

Nos tendremos que ir al apartado HTML de nuestro blog y copiar el siguiente código justamente encima de </head>


<style type='text/css'>
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -100px;
border: 1px dashed gray;
visibility: hidden;
color: #FFFF00;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 10px; /*position where enlarged image should offset horizontally */
}
</style>


Segundo paso:(Crear imagen)

Llegado este punto ya tendremos el estilo necesario para crear nuestra ampliación, tan tolo tendremos que alojar nuestra imagen en un servidor de imagenes, yo por ejemplo utilizo tinypic, una vez obtenida la dirección de la imagen tendréis que copiar el siguiente código en el lugar que queráis crear el efecto.

<a class="thumbnail" href="#thumb"><img src="URL IMAGEN" width="100px" height="100px" border="0" /><span><img src="URL IMAGEN" /><br />TEXTO (OPCIONAL)</span></a>


Cambiar URL IMAGEN por la dirección de vuestra imagen, fijaros que lo tendréis que incluir dos veces. Como opcional podréis añadir texto donde puse TEXTO (OPCIONAL).

El resultado será lo siquiente:(Poner cursor encima de la imagen)

Texto si se desea poner