Posted By

septimoc on 10/24/08

Tagged

Versions (?)

Last Edited at 10/24/08 07:27am

Statistics

Viewed 327 times

Favorited by 1 user(s)

Related snippets

Agrandar Imagenes

/ Published in: CSS

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 ...
aÃ±adiremos este cÃ³digo:

Highlighted TextExpand

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

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

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.