jueves, 16 de abril de 2009

AMPLIAR IMAGEN CON CURSOR ENCIMA

Este recurso consiste en ampliar una imagen simplemente poniendo el cursor encima, se ampliará sin necesidad de hacer click en la imagen como normalmente estamos acostumbrados. Este recurso que nos permite hacer CSS viene especialmente bien para imagenes pequeñas o simplemente para llamar la atención de los visitantes, para insertarlo en vustro blog tan solo tendréis que seguir los siquientes pasos.

Primer paso:(Copia del estilo)

Nos tendremos que ir al apartado HTML de nuestro blog y copiar el siguiente código justamente encima de </head>

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


Segundo paso:(Crear imagen)

Llegado este punto ya tendremos el estilo necesario para crear nuestra ampliación, tan tolo tendremos que alojar nuestra imagen en un servidor de imagenes, yo por ejemplo utilizo tinypic, una vez obtenida la dirección de la imagen tendréis que copiar el siguiente código en el lugar que queráis crear el efecto.
<a class="thumbnail" href="#thumb"><img src="URL IMAGEN" width="100px" height="100px" border="0" /><span><img src="URL IMAGEN" /><br />TEXTO (OPCIONAL)</span></a>

Cambiar URL IMAGEN por la dirección de vuestra imagen, fijaros que lo tendréis que incluir dos veces. Como opcional podréis añadir texto donde puse TEXTO (OPCIONAL).

El resultado será lo siquiente:(Poner cursor encima de la imagen)

Texto si se desea poner

10 Comentarios:

diana dijo...

MUCHAS GRACIAS POR TODA ESA VALIOSA INFORMACIÓN
NO HABLO DE ESTE POST SINO DE TODOS.
AYER ENCONTRE EL RINCON DEL BLOG Y LO HE ESTADO CHISMOSIANDO Y ME HAS SACADO DE UNA...QUE NO TE IMAGINAS, NO SABIA COMO HACERLE.
POR AHORA MI BLOG ESTA EN OBRAS APENAS RETOME TE DOY EL LINK PARA QUE TE DES UNA PASADITA.
:D
SALUDOS Y GRACIAS DE NUEVO

Asì esta escrito dijo...

Hola!!!!
Quisiera hacerte una consulta.
En mi blog tengo instalado el Yahoo Media Player y quisiera saber de que forma puedo hacer que el orden de la presentacion de los temas sean uno debajo del otro y no que quede uno a continuacion del anterior usando una misma linea.
De antemano te doy muchas gracias y espero que me puedas ayudar.

caxitos dijo...

Asi esta escrito en primer lugar te recomendaría reproductores tipo DEEZER, lo que me dices si no me equivoco se soluciona de la siguiente forma, tendrás que añadir después del título de cada tema el código <br> que se corresponde con el salto de linea en HTML, bueno pruebalo y me cuentas que tal.;)

Anónimo dijo...

me gustaría saber como lograr que la imagen que se amplia so aparezca encima de la imagen pequena sino que aparezca encima, es decir que no la cubra

caxitos dijo...

Anonimo Dejar vuestros nombres pleasee, hice una entrada explicando una forma de ampliar las imagenes de forma superpuesta. Espero que te sirva ya me cuentas.

Favian dijo...

amigo...es impresionante tu aporte, no te imaginas lo mucho que trate de hacer esto y no me salia, gracias man, me sirvió mucho....ahora...tengo una duda, como se hace para que la imagen se muestre en otro sector de la página?...y gracias de nuevo por el valioso aporte

caxitos dijo...

Favian en otra parte del blog... ponme un ejemplo... lo normal es que se amplie la imagen cuando se pone el cursor encima y que la imagen aparezca o sobrepuesta a la otra o en un costado como esta puesto este ejemplo...
Si me concretas donde quieres que te aparezca la imagen quizás pueda ayudarte.
Un saludiko!

Luis dijo...

Exelente tu post y muy interesante tu blog me ha ayudado ha aclarar cosas, apenas estoy iniciandome en css.. Gracias!

Publicar un comentario

Haga su comentario

Bienvenido al Rincon del Blog
Tus comentarios nos ayudan a mejorar
Muchas Gracias por Comentar.