Advanced Search

Return to Snippet

Revision: 9178
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