-->

Agrandar imagen al pasar el ratón por encima

Agrandar imagen al pasar el ratón por encima

En este artículo vamos a ver cómo agrandar una imagen al pasar por encima el ratón simulando la acción de un zoom.

Ejemplo: Agrandar imagen al pasar el ratón por encima para Blogger

En primer lugar deberemos personalizar la plantilla que utilizamos en blogger, para ello deberéis dirigiros a la sección Plantilla y a continuación pulsar el botón Edición de HTML.

En la ventana que se abre y que muestra el código de nuestra plantilla  deberéis localizar el siguiente código:
]]></b:skin>
Justo antes del código anterior deberéis pegar el siguiente código que se encarga de definir la nueva clase thumbnail:
.thumbnail {position: relative; z-index: 0; }
.thumbnail:hover{ background-color: transparent; z-index: 50; }
.thumbnail span{
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; }

Cuando queramos utilizar el efecto zoom sobre una imagen en alguno de nuestros post, esto es lo que deberemos escribir:
<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>

Por último deberás personalizar el código anterior para que se adapte a las propiedades de la imagen que quieres mostrar:
  • Cambiar URL de la imagen
  • Modificar height
  • Modificar width
  • Personalizar texto del pie

Resultado de agrandar foto al pasar el ratón por encima


Ejemplo
Etiquetas: