Agrandar imagen al pasar el mouse

Este efecto hará que una imagen pequeña tenga un efecto de zoom al pasar el cursor sobre ella en sólo dos pasos. Este es el ejemplo:


Los Querubines de Rafael

1. Entra a Diseño > Edición de HTML y antes de </head> pega lo siguiente:


<style type='text/css'>
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /* Estilos para la imagen agrandada */
position: absolute;
background-color: black;
padding: 5px;
left: -100px;
border: 5px double gray;
visibility: hidden;
color: #ffffff;
text-decoration: none;
}

.thumbnail span img{
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{
visibility: visible;
top: 0;
left: 10px;
}
</style>



2. Ahora cuando quieras crear el efecto usa este código en tus post:

<a class="thumbnail" href="#thumb"><img src="URL de la imagen" width="100px" height="80px" border="0" /><span><img src="URL de la imagen" /><br />Pie de foto</span></a>

Ya sólo cambia la URL de la imagen, el texto del pie de foto y en ancho y alto de la imagen; toma en cuenta que esas medidas son las que se verán en la imagen pequeña (thumbnail).
También puedes personalizar el primer código, puedes cambiar el fondo que tendrá la imagen, el borde y el color del texto del pie de foto.

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: black; <-- Color de fondo
padding: 5px; left: -100px;
border: 5px double gray; <-- Borde de la foto
visibility: hidden;
color: #ffffff; <-- Color del texto del pie de foto

Vía | Gemablog