Ej:
Asi es Key
Para llegar a este resultado nos debemos situar en Plantilla/ Edición de HTML y justo después de <head> aplicamos el siguiente código:
Es importante que siempre antes que hagas un cambio en la plantilla guardes una copia, por si el truco no te funciona o no te gusta puedas volver a lo que tenías.
Nada es infalible...^_^
<style type='text/css'>
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -100px;
border: 1px dashed gray;
visibility: hidden;
color: #FFFF00;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 10px; /*position where enlarged image should offset horizontally */
}
</style>
Después de añadir el código en la plantilla, queda añadir el siguiente código justo donde deseamos que salgan las imágenes en nuestra entrada.
<a class="thumbnail" href="#thumb"><img src="aquí-la-url-de-la-imagen" /><span><img src="aquí-la-url-de-la-imagen" width="100px" height="100px" border="1" /><br />Texto si se desea poner</span></a>
Con este código podemos configurar a nuestro gusto el tamaño de la imágen que se amplía, la posición (width="100px" height="100px"), el borde (border="1"), y nos da la posibilidad de agregar un texto en la base de la imágen.
Y pronto, magia...
Lo descubrí hace tiempo en el blog de César, gran fuente de conocimiento, que lamentablemente ya no está publicando. (César, gracias totales !) ;)
Seguir Leyendo...[+/-]
No hay comentarios:
Publicar un comentario