AGRANDAR UNA IMAGEN AL PASAR EL MOUSE

AGRANDAR UNA IMAGEN AL PASAR EL MOUSE

"BLOGS KIRADOBER"

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:

Se recomienda antes de realizar cualquier cambio en su plantilla, efectuar una copia de seguridad de su blog .  Blogs Kiradober  no se hace responsable si no ejecuto claramente el código tal como se lo indica en este tutorial.

Para más detalles puede visitar el siguiente enlace:                       

Entra a Plantilla | Edición de HTML y antes de ]]></b:skin> pega lo siguiente:

Un clic en “Plantilla”

    Un clic en “Editar HTML”

  Ahora se te abrirá el Editor HTML de tu plantilla

En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,

 3 Busca el siguiente código


]></b:skin>


 Justo arriba (o antes) del código que encontraste, inserta las siguientes lineas de código.

.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; }

Despues de haber insertado el código, un clic en  “Guardar plantilla”

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{
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

Data de la Publicación; 15-10-2019

 Fuente;  Gemablog

 Publicado por;