Zoom en imágenes al pasar el mouse con CSS

Hemos visto ya algunas formas de hacer zoom en las imágenes en Blogger, pero este es un efecto un poco diferente, ya que permite incluir un título en la imagen además de que no aumenta la imagen en sí, sino que sobrepone una en mayor escala.

Puedes ver un ejemplo más claro en la siguiente imagen, deberás situar el mouse sobre ésta:
Título de ejemplo para la imagen





En "Diseño | Edición HTML" deberás buscar la siguiente línea:

]]></b:skin>

Arriba de esta deberás pegar el siguiente código:

.imagen-zoom{
position: relative;
z-index: 0;
}
.imagen-zoom:hover {
z-index: 60;
background-color: transparent;
}

.imagen-zoom img{
border:1px solid #c0c0c0;
padding:5px;
}

.imagen-zoom span{
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition:0.5s;
transition: 0.5s;
position: absolute;
visibility: hidden;
background-color: #fff;
padding: 5px;
left: -80px;
bottom: -80px;
border: 1px solid #969696;
color: #2d2d2d;
font-size:18px;
font-weight:normal;
font-family: Arial, Helvetica, sans-serif;
opacity:0;
text-align:center;
}

.imagen-zoom span img{
border:1px solid #c0c0c0;
padding: 5px;
max-width:400px;
max-height:auto;
}
.imagen-zoom:hover span {
visibility: visible;
opacity:1;
bottom: 30px;
}

Guarda los cambios en la plantilla y listo.

Ahora cada vez que desees incluir este efecto en alguna entrada deberás hacerlo mediante el siguiente código:

<a class="imagen-zoom"><img src="URL IMAGEN" width="200px" height="auto" border="0" /><span>TÍTULO IMAGEN<img src="URL IMAGEN" /></span></a>

Este fragmento deberás pegarlo en la Edición de HTML de la entrada.

Reemplaza los valores correspondientes y listo.


Recuerda que debes permanecer en modo Edición de HTML en la entrada, ya que de lo contrario el editor deformará el código.