Efecto lupa en imagenes

Un bonito efecto para las imagenes, yo le llame "efecto lupa" porque al pasar el mouse por la imagen esta se agranda mas de diez veces su tamaño...
aqui dejo el codigo...

1. Ir a la plantilla/Edicion de html y despues de pegar lo siguiente:


<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: lightblue;
padding: 5px;
left: -500px;
border: 1px dashed gray;
visibility: hidden;
color: black;
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: 60px; /*position where enlarged image should offset horizontally */

}

</style>


Guardar...

Pegar lo siguiente donde quieras ver el efecto....


<a class="thumbnail" href="#thumb"><img src="http://url de tu imagen.jpg" width="100px" height="66px" border="0" /><span><img src="http://url de tu imagen.jpg" /><br />Aqui mensaje o lo que quieras poner</span></a>

Ejemplo: (pasar mouse por la imagen)



Que lindo cachorro!