-->

Mostrar entradas

jueves, 13 de diciembre de 2007

Agrandar Imagenes

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

Inseguridad

5 comentarios:

Aguas Abiertas dijo...

COMO PUEDO HACER PARA QUE LA IMAGEN AGRANDADA SE MUESTRE SOBRE EL LADO IZQUIERDO Y NO SOBRE EL DERECHO??
MUCHAS GRACIAS

Eloy dijo...

En Firefox no funciona bien, la imagen agrandada sale sobre la base de la imagen de la web en vez de sobre la parte superior, ¿alguna idea para solventar esto?.

Roque de Paysandu dijo...

escribe un top para IE y otro para los demas navegadores. IE explore no toma como codigo de comentarios a las dos barra inclindas (//), entonces puedes hacer el css asi:

...
top:-10px; /* Firefox */
// top:5px; /*IE*/

firefox tomara el primer top puesto que el otro es un comentario para firefox; en cambio IE tomara el segundo top puesto que no es un comentario y es el ultimo top. Recuerda que en css se tomara el ultimo selector de haber mas de uno igual.

AstridBolanos dijo...

gracias me fue de muchas ayuda

JantonioSR dijo...

Pero en la 2ª parte,tenemos que hacer una ampliación de nuestra foto,para que salga en la ampliación o simplemente esa foto ya sale ampliada.
Tampoco entiendo como se tiene que hacer para Firefox

Mil gracias

 
ir arriba ir arriba