Zoom en imágenes al pasar el mouse con CSS

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




El Tutorial:


Paso 1: Añadiendo los estilos:

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.

Paso 2: Utilizando el efecto:

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.

Importante

Recuerda que debes permanecer en modo Edición de HTML en la entrada, ya que de lo contrario el editor deformará el código.
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Cómo obtener la primera imagen del post en Blogger sin Javascript # - Cómo obtener la primera imagen del post en Blogger sin Javascript
Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger # - Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger