Revision: 9178
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at October 24, 2008 07:27 by septimoc
Initial Code
<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: black; 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 sólo nos faltará aplicar este otro en el sitio que queramos mostrarlo bien sea un post o en el -sidebar-: <a class="thumbnail" href="#thumb"><img src="http://i81.photobucket.com/albums/j219/jgutierrezs/arbol-2.jpg" width="100px" height="100px" border="0" /><span><img src="http://i81.photobucket.com/albums/j219/jgutierrezs/arbol-2.jpg" /><br />Inseguridad</span></a>
Initial URL
Initial Description
Mostrar las imagenes y que se agranden cada vez que se tocan o pasen el ratón del mouse por encima.Es un truco que resulta curioso e interesante, Para llevarlo a cabo iremos a plantilla y justo antes de la etiqueta de ...</head> añadiremos este código:
Initial Title
Agrandar Imagenes
Initial Tags
Initial Language
CSS