Agrandar imagen al pasar el mouse

6 de junio de 2009 206 comentarios ,
Este efecto hará que una imagen pequeña tenga un efecto de zoom al pasar el cursor sobre ella en sólo dos pasos. Este es el ejemplo:

Querubines de rafael
Los Querubines de Rafael



Entra a Plantilla | Edición de HTML y antes de ]]></b:skin> pega lo siguiente:
.thumbnail {position: relative; z-index: 0; }
.thumbnail:hover{ background-color: transparent; z-index: 50; }
.thumbnail span{ /* Estilos para la imagen agrandada */
position: absolute;
background-color: black;
padding: 5px;
left: -100px;
border: 5px double gray;
visibility: hidden;
color: #ffffff;
text-decoration: none;
}
.thumbnail span img{ border-width: 0; padding: 2px; }
.thumbnail:hover span{ visibility: visible; top: 0; left: 10px; }
Ahora cuando quieras crear el efecto usa este código en tus post:
<a class="thumbnail" href="#thumb"><img src="URL de la imagen" width="100px" height="80px" border="0" /><span><img src="URL de la imagen" /><br />Pie de foto</span></a>

Ya sólo cambia la URL de la imagen, el texto del pie de foto y en ancho y alto de la imagen; toma en cuenta que esas medidas son las que se verán en la imagen pequeña (thumbnail).
También puedes personalizar el primer código, puedes cambiar el fondo que tendrá la imagen, el borde y el color del texto del pie de foto.
.thumbnail span{
position: absolute;
background-color: black; <-- Color de fondo
padding: 5px;
left: -100px;
border: 5px double gray; <-- Borde de la foto
visibility: hidden;
color: #ffffff; <-- Color del texto del pie de foto


Vía | Gemablog


206 comentarios en:

" Agrandar imagen al pasar el mouse "

  1. jaja. No sabes todo lo que busque esto hace unos meses!!! y no lo encontré. Quizás porque lo buscaba como "visor de imágenes + Blogger". jajajajaja.


    Un abrazo!!!

    ResponderEliminar
  2. jajaja, quizá no lo encontraste pero seguro hayaste cómo poner un bonito "visor de imágenes en Blogger" jajaja.

    ResponderEliminar
  3. Si, definitivamente estaba un poco un poco errado con la búsqueda. El Google debería haberme dicho:

    Quizás quiso decir: Agrandar imagen al pasar el mouse.

    jajajajaja.

    ResponderEliminar
  4. Por suerte no es Bing, sino seguro te corrige con un insulto, jajaja.

    ResponderEliminar
  5. Jajajajajaja!!!!1

    Muy bueno el chiste bro... no puedo para de reirme!!!!

    ResponderEliminar
  6. Va directo a mis marcadores. Hace tiempo lo busque yo también y nunca lo encontré, lo vi en una pagina y nunca supe como hacerlo.. Gracias por el tip! :)

    Saludos!

    ResponderEliminar
  7. Por nada Turko, gracias por pasar.
    Saludos.

    ResponderEliminar
  8. HOla, soy yo de nuevo con una nueva sugerencia. Traté de aplicar el efecto de agrandar la imagen al pasar el mouse sobre la misma, pero no sé cómo colocar el código en el post. Podría explicarlo nuevamente y si no es mucho pedir poner imagenes del proceso.
    Gracias.

    ResponderEliminar
  9. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  10. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  11. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  12. Hola potro te saluda Anti-Hacker

    Muy buen post, pero me gusto mas el que cuando pasabas el puntero se agrandaba la imajen, ya hasta se lo he agrege a las imajenes de mi blog.

    Tambien queria preguntar:¿Como poner dos siberbar para la plantilla RAUNDER 4?

    La respuesta a esa pregunta la e buscado hasta el fin del mundo.

    Salu2

    ResponderEliminar
  13. Hola Anti-Hacker,

    Aún no tengo un post al respecto y es muy largo para explicarlo por acá, pero en Blog and Web tienen un excelente tutorial de cómo agregar una tercera columna a cualquier plantilla.

    http://blogandweb.com/blogger/como-agregar-una-sidebar-en-una-plantilla-blogger/

    Saludos.

    ResponderEliminar
  14. Hola muy buenas,esto es sin duda lo que estaba buscando,mil millones de gracias "El Potro" pero hay algo que no tengo nada claro y es donde debo situar la 2ª parte.

    -¿Donde debo colocar ese código? y obligatoriamente -¿deben ser Urls de imagenes?
    -¿no pueden ser imagenes sin más?

    De antemano les doy las GRACIAS

    ResponderEliminar
  15. Hola JantonioSR,

    El segundo código lo pones donde escribes tus entradas, la URL de la imagen (sonará redundante) es la que muestra la imagen, por lo que es necesaria para poder verse dentro del blog.

    Saludos!

    ResponderEliminar
  16. Si te das cuenta te estoy preguntando lo mismo en 2 posts para poder agrandar la imagen de una manera u otra...pido disculpas y la respuesta en ambos casos me sirve y yo te lo agradezco enormemente.
    Otra pregunta que quiero hacerte es ¿debo alojar la imagen que quiero poner en "imageshack" por ejemplo? y cambiar donde pone "URL de la imagen" por alguno de los links que "imageshack" me ofrece?

    Saludos y gracias

    ResponderEliminar
  17. Claro JantonioSR, puedes alojarla en Imageshack o donde más te guste, sólo presta atención a que la URL sea la correcta, por ejemplo en Imageshack deberá ser el link directo, algo como esto:
    http://img21.imageshack.us/img21/4263/125x125q.png

    Si te fijas la URL debe contener al final el nombre del archivo y la extensión.

    Saludos!

    ResponderEliminar
  18. Ya lo he probado y lo hemos hecho perfecto gracias a ti y a esta web.
    Pero aún me queda otra pregunta:

    ¿Pueden ponerse imagenes una al lado de otra? y ¿como?

    Es decir,por ejemplo,3 ó 4 fotos en una misma línea(que no tengan que ser obligatoriamente una debajo de otra ¿¿es posible??
    Algo así: http://www.metalkingdom.net/main/

    ResponderEliminar
  19. Pues poniendo el código junto (pegado uno del otro) debe quedar así, inténtalo y me comentas.
    Saludos.

    ResponderEliminar
  20. Gracias, el Potro. Estoy intentando poner en mi blog esto de agrandar la imagen al pasar sobre ella. ¡Ese efecto me encanta y lo andaba buscando hace rato! Pero tengo una pregunta parecida a algunas anteriores, respecto a la segunda parte del código, en el post.
    Por ejemplo, ya tengo imágenes en los post, las cuales he subiddo desde mi PC. Según entiendo, al postearlas en mi blog, de Blogger, automáticamente se alojan en mis álbumes web de Picassa. En ese caso, ¿cuál debe ser la url que debo poner en el código en el post para aplicar el efecto de agrandado a esa imagen que ya tengo posteada?
    1.¿Debe ser la url que tiene en Picassa? ò
    2.¿Debe ser la url que normalmente aparece en la barra de direcciones cuando cliqueo sobre ella y se abre la imagen? ó
    3.¿Debe ser otra?
    ¿Podrías aclararme, por favor? Y perdona tanta molestia.
    Muchísimas gracias por todo.

    ResponderEliminar
  21. Hola Vicky,

    De preferencia la de Picasa, entra a Picasaweb y busca la foto que quieres para el efecto, haz click sobre ella para verla y luego con el botón derecho haz click sobre la foto y selecciona Copiar la ruta de la imagen; esa es la URL que deberás usar.
    También te recomiendo esta entrada, es una forma aún más sencilla de lograr el mismo efecto con las imágenes:
    http://ciudadblogger.com/2009/09/agrandar-imagen-al-pasar-el-mouse-ii.html

    Saludos.

    ResponderEliminar
  22. HOLAA NO SOI UN EXPERTO EN ORDENADORES NI SE MUCHO DE HTML PERO ME GUSTARIA SABER QUE ES EL URL DE LA IMAGEN

    ResponderEliminar
  23. Hola Jhonny G.R.,

    La URL de la imagen es la dirección en Internet de la foto, cuando una imagen se sube a Internet inmediatamente genera una URL para poder acceder a ella, esa URL es la que necesitas para aplicar el truco.
    Por ejemplo, en la foto de este post la URL de la imagen es esta:
    http://lh5.ggpht.com/_qgZA1ny_dAs/SlgpeFq8PZI/AAAAAAAAB-c/f72o8Xb3GDw/angeles.jpg

    Saludos.

    ResponderEliminar
  24. Tengo alguna duda que resolver y es que nos ha surgido un pequeño problema de hospitales pero que ya está subsanado y aquí estoy de nuevo con mis preguntas y mi ignorancia:

    -Hice todo el procedimiento para agrandar las imagenes pero resulta que al hacerse más grandes no pueden verse del todo,y es que les "molesta" la barra lateral derecha.
    Aquí te dejo el link para que veas lo que te digo:

    http://metalfinal.blogspot.com/2009/10/baron-rojo-en-clave-de-rock.html


    Y DE ANTEMANO TE DOY LAS GRACIAS

    ResponderEliminar
  25. Hola JantonioSR,

    Qué gusto verte de nuevo por acá.
    Efectivamente es un problema con tu plantilla. En un inicio pensé que serían las imágenes pero tome el código que usaste e hice pruebas en tres plantillas y en todas funcionó sin problema alguno.
    No sé qué podría ser lo que lo está ocasionando :(

    Saludos.

    ResponderEliminar
  26. ¿Podría cambiar la plantilla? pero ¿cual debo escoger?

    Puedes decirme en que 3 plantillas usaste el código??

    Saludos y mil gracias

    ResponderEliminar
  27. Baja unas tres plantillas que te gusten y en un blog de pruebas súbela y haz el truco para ver si no tienes ningún problema, de esa forma será más fácil saber.

    Saludos.

    ResponderEliminar
  28. Muchas gracias
    Probaré a ver que tal...ya te contaré

    ResponderEliminar
  29. Que tal, muy bueno el efecto. Lo que no entendí es donde colocar el segundo código, es decir dentro del post, lo pongo antes, después o en vez del código de la imagen que ya está?

    ResponderEliminar
  30. Hola Don London,

    El segundo código lo pones dentro de un post y será para sustituir el código de la imagen.
    Sólo cambia la URL de la imagen donde se indica y listo.

    Saludos.

    ResponderEliminar
  31. Buenas de nuevo compañero

    Tenia 2 dudas respecto a este hilo
    Se podria utilizar igualmente en una sidebar como gadget html?

    habria alguna forma de conseguir el mismo efecto pero q en vez de abrirse una imagen grande con pie de foto normal,se abriese una imagen chica con un gran pie de foto?
    Puede sonar a cosa rara pero mi idea es poner por ejemplo la portada de un libro y q al pasar por encima se abra la ventana con la portada del libro y los datos del mismo(editorial,de q va,precio, etc...)

    ResponderEliminar
  32. En la sidebar sí se puede, sólo agregas el código de la imagen en un elemento HTML/Javascript.
    Respecto a lo otro, podrías intentarlo usando este código en la imagen:

    <a class="thumbnail" href="#thumb"><img src="URL de la imagen" width="100px" height="80px" border="0" /><span style="font-size:16px;"><img src="URL de la imagen" width="100px" height="80px" /><br />Pie de foto</span></a>

    Saludos.

    ResponderEliminar
  33. gracias jeropa me sirvio bastante para mi page

    ResponderEliminar
  34. Hola! ya veo que sabes mucho de este mundo de los blogs! Yo lo q estoy buscando es como hacer para q las imagenes no se agranden, ya que es un blog de fotografia y quiero evitar q las usen. Seguro es facil pero no lo encuentro! Gracias de antemano y felicidades por este espacio!

    ResponderEliminar
  35. Hola Nina,

    Usa el buscador de este blog y busca 'eliminar enlace de la imagen' para que la imagen no se abra en otra ventana, así como 'cómo evitar que te copien imágenes y texto' para proteger el contenido de tu blog.

    Saludos.

    ResponderEliminar
  36. Holaaaaaaaaaaaaaa, excelente aporte :)

    Tengo una pequeña duda...

    La imagen cuando se agranda "se corta"

    Te dejo la imagen como muestra: http://i42.tinypic.com/2rcmu14.jpg

    Quería saber qué tengo que regular, cambiar, etc.

    Muchas gracias por la atención

    ¡Buenísimo el Blog!

    Saludos...


    E.G.

    ResponderEliminar
  37. Hola guanki.-,

    Es posible que sea porque la imagen es muy grande y excede el límite de tamaño del contenedor de las entradas.
    Otra opción que podrías tratar es usar este método el cual es más sencillo y quizá solucione el problema, aunque si se sigue cortando entonces sí sería por el tamaño de la imagen.

    Saludos y gracias por tus comentarios.

    ResponderEliminar
  38. Hola nuevamente!

    Gracias por la atención, me sirvió el 2do truco, salvo en las imágenes apaisadas, que se cortan por la mitad

    En fin, gracias por toda tu ayuda, creo que lo voy a dejar así nomás jajaja

    ¡Saludos!

    E.G.

    ResponderEliminar
  39. Usa imágenes más pequeñas para que no tengas problemas.
    Saludos!

    ResponderEliminar
  40. Sí, lo que pasa es que es un Blog sobre dibujos propios, y el truco está bueno para este caso, más si no deseo compartir el enlace de la imagen :)

    ¡Gracias!

    ResponderEliminar
  41. Hola, que tal potro? me encanto tu post yo tambien lo anduve buscando por todos lados y por fin lo encontre aca..

    Te molesto con una preguntita que seguro es una ganzada.. yo tengo las fotos y cuando apoyo el mouse me anda joya pero la imagen sale muy abajo.. digamos yo quiero que al apoyar el mouse la imagen aparesca mas arriba o digamos casi al centro de la pantalla.. es posible?

    espero tu resp ! :)

    ResponderEliminar
  42. Hola guidocho,

    Me alegro que hayas encontrado aquí lo que andabas buscando =)

    Para lo que mencionas intenta con esto, busca esta parte del código:

    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;

    Y cambia lo que está en negrita por fixed

    Si batallas mucho puedes intentar también con este método.

    Saludos!

    ResponderEliminar
  43. hermoso, hice la de cambiar absolute por fixed y me qeda excelente, la verdad un groso loco.

    saludos. Guido

    ResponderEliminar
  44. potro, tengo un problema ahora.. la pagina me quedo joya, es www.diosas-sexy.com pero fijate qe cuando inicia en chrome para entrar/salir se ve bien, pero en internet explorer se ve mas abajo..

    sabes como arreglarlo? :)

    ResponderEliminar
  45. Ni idea, Internet Explorer es todo un dolor de cabeza :S

    ResponderEliminar
  46. HOLA una duda al poner este efecto con mas imágenes la imagen que se agranda queda debajo de las pequeñas sabe alguien como hacer que la imagen que se agranda siempre que de encima de todas las imágenes pequeñas al pasar el mouse

    ResponderEliminar
  47. Hola lalo,

    Lee el comentario #43 quizá eso te sirva.
    Saludos.

    ResponderEliminar
  48. Muy bueno! Gracias por tu ayuda!

    ResponderEliminar
  49. De nada, me alegro que te haya gustado :)

    ResponderEliminar
  50. Hola amiguete, te agradezco enormemente este codigo que me sirvio de mucho en mi blog, pero tengo un problema, en internet explorer no funciona bien, la imagen cuando se agranda se ve debajo de unos enlaces de texto que tengo al lado, en vez de por encima como me pasa en mozilla, ¿como podria solucionarlo?. Gracias de antemano.

    ResponderEliminar
  51. Es difícil complacer a todos los navegadores, más específicamente a Internet Explorer, es "común" que ahí siempre algo se vea mal y en muchos de los casos no hay mucho que hacer.
    Mejor prueba con este método, seguro ese no te dará el mismo problema.

    Saludos.

    ResponderEliminar
  52. Hola!.... bueno, te escribo por aquí tambien y parecería que soy un stalker o algo así... pero no :) es solo que estoy usando algunas herramientas tuyas y esta es otra de ellas...

    Esta la he logrado ejecutar bien, pero tengo el inconveniente de que al agrandarse, las imágenes se despixelan mucho... intenté cambiarlas de destino, pues blogger tiende a alterar la calidad de las imágenes, pero sigo con el mismo resultado de mala calidad... como podrías ayudarme con esto?

    ResponderEliminar
  53. Oh Dios... disculpa este mensaje... ya lo he resuelto por medio de Flickr... Olvida que puse esto por favor y disculpa la molestia!...

    ResponderEliminar
  54. No es ninguna molestia, me alegro que ya lo has solucionado :)
    ¡Saludos!

    ResponderEliminar
  55. hola soy lalo pero si yo quisiera que esta imagen fuera para un enlace como lo aria o que le agragaria

    ResponderEliminar
  56. No le puedes poner el enlace porque el atributo href ya tiene asignada una orden.
    Puedes intentar con este otro método:
    http://ciudadblogger.com/2009/09/agrandar-imagen-al-pasar-el-mouse-ii.html

    ResponderEliminar
  57. Hola,
    He copiado el codígo de arriba en el sidebar en la herramienta de HTML/javascript añadiendo la url de la imagen, pero no me sale ninguna imagen. He copiado el codigo corto, ¿es ese?

    ResponderEliminar
  58. Me parece que en las plantillas nuevas de Blogger no funciona :\

    ResponderEliminar
  59. Hola Potro!
    He visto en unos cuantos blog's que debajo de cada entrada aparecen tres imágenes pequeñas con un breve resumen.
    Inicialmente lo hice en mi plantilla de diseño (introduciéndolas como un gadget de fotografía) pensando que se ajustaría al tamaño horizontal de cada entrada, pero el tamaño que me da por opción es de 200 px, quedan las imágenes muy grandes
    No sé si me explico
    pero te adjunto un link donde puedes ver lo que te digo
    http://www.creaturecomfortsblog.com/

    cómo lo puedo hacer?

    Muchísimas gracias

    ResponderEliminar
  60. Ese es un gadget que se llama Linkwithin, Rosa tiene una entrada que explica cómo ponerlo:
    http://elescaparatederosa.blogspot.com/2009/04/linkwithin-entradas-relacionadas-con.html

    Saludos!

    ResponderEliminar
  61. Por Dios qué torpe soy

    Ayudadme con esto.

    La primera parte la copio en el lugar correcto pero ¿en qué parte del código uso la segunda parte?.

    Tengo un blog con un montón de imáganes (obras de arte en dos columnas) y yo no veo Url de imágenes ni sé en que lugar tengo que usar ese segundo código.

    ¿Alguien puede decirme qué buscar en el código css para sustituir?

    Gracias,

    ResponderEliminar
  62. El segundo código va en las entradas. Si en tus entradas ya tienes imágenes entonces dale click en Editar la entrada, arriba verás dos pestañas, una que dice Edición de HTML y otra que dice Redactar. Da click en Edición de HTML y verás los códigos de tu entrada, ahí encontrarás los códigos de tu imagen.
    Para que te sea menos complicado, copia el código de ejemplo de esta entrada y pegalo en tu entrada, luego busca en tu entrada la URL de tu imagen, es algo así como esto:
    http://lh5.ggpht.com/_qgZA1ny_dAs/SlgpeFq8PZI/AAAAAAAAB-c/f72o8Xb3GDw/angeles.jpg

    Esa URL la pegas en las partes del código que se indica y listo. El otro código de imagen que tengas en tu entrada puedes eliminarlo.

    Saludos.

    ResponderEliminar
  63. gracias por todos los aportes, y mi consulta es la siguiente cuando pongo este efecto o otro que haga que la imagen se agrande y al costado esta publicado algun video la imagen sale detras del video hay forma que salga por encima del video? gracias por el tiempo empleado para respoder.

    ResponderEliminar
  64. ¿En cuál entrada te sucede eso? Yo lo he probado en un par de plantillas y no tuve ese problema.

    ResponderEliminar
  65. el potro sorry mira e visto un modelo muy bonito no se si me puedes ayudar a conseguirlo no se si conoces una pagina que se llama lockerz.com bueno ahi tienen un catalogo muy bonito que cuando le das click aparece como una lupita y es un modelo muy elegante no se si me puedes ayudar a conseguir ese modelo es como para tiendas elegantes me entiendes entonces quisiera que me ayudaras a conseguirlo gracias. Espero tu respuesta disculpa si lo que escribi no se entiende muy bien :(

    ResponderEliminar
  66. Hola disculpa que te moleste!!! quiero saber si me puedes ayudar a hacer esto mismo pero en power point, necesito hacer un mapa y deseo que se resalten algunas fotografias cuando pase el cursor sobre esa parte donde van a estar ubicadas. crees que me puedes ayudar por favor!!!
    puedas o no, de antemano te lo agradesco!!!!

    ResponderEliminar
  67. Siento no poder ayudarte, no sólo porque el blog es para temas de Blogger sino porque honestamente desconozco cómo pueda hacerse lo que deseas.

    ResponderEliminar
  68. Hola potro de nuevo yo, estoy implementando tus trucos y he podido hacerlos todos excepto este. El problema es que no me agranda la imagen nada mas me pone como un resalte aparece con recuadro y pie de pagina pero con el mismo tamaño, tuve que quitarlo porque me daba demasiados problemas pues ademas me movio de lugar la imagen. Me ayudas? ya utilice el otro metodo pero me gustaria tener este

    ResponderEliminar
  69. Es posible que no se pueda poner por tu plantilla, en muchas ocasiones los estilos de la plantilla o las modificaciones que se le han hecho no dejan que este truco funcione.

    ResponderEliminar
  70. Hola el Potro, excelente blog. Yo tenia una duda que no se si se podra hacer porque la verdad estoy empezando con esto y no tengo mucha idea. Me gustaria saber si el efecto de agrandar la foto la puedo poner como general, quiero decir, que no tenga que ir insertarndo la url de cada imagen y me lo haga automatico porque tnego muchas imagenes :S Te dejo mi pagina: www.entradasdenochevieja.es
    Muchas gracias y disculpa por las molestias.

    ResponderEliminar
  71. Lamentablemente no sonic, es necesario que se agregue el código en todas las entradas donde deseas que se tenga este efecto :(
    Saludos.

    ResponderEliminar
  72. Men Eres un Groso Eres Lo mejor xD Gracias por El Codigo Esta Muy Elegante Men me ayudastes mucho con ese codigo :D

    ResponderEliminar
  73. Gracias a ti Camilo por tu visita, qué bueno que te ha sido útil :)

    ResponderEliminar
  74. Hola potro, de nuevo yo, oye ya puse el efecto en un blog de pruebas, y si me funciona ahora el problema es que me manda la imagen demasiado grande, como puedo hacer para que no se vea gigante, aqui puedes ver lo que te digo mundowull.blogspot.com
    gracias por tu ayuda, DIOS te bendiga

    ResponderEliminar
  75. HOla!! me vino de excelente ayuda para un pequeño site que estoy intentando construir. muchas gracias.
    Pero tengo una consulta, que parametro debo cambia o modificar para que se agrande pero desde el medio de la imagen y no abajo. Desde ya muchas gracias.

    ResponderEliminar
  76. Editor, puedes subir la imagen más pequeña, o bien, en la parte del código donde va la segunda URL de la imagen agrega lo que está en negrita: <img src="URL de la imagen" width="400px" />

    Buenos Aires, con este método es casi imposible hacerlo :(

    ResponderEliminar
  77. Hola potrop gracias por todo, una ultima consulta existe la posibilidad de elegir donde aparecera la imagen,es decir centrada, a la derecha o izquierda, etc; aparte de cambiar abosulte por fixed GRACIAS POR LA AYUDA

    ResponderEliminar
  78. Prueba modificando donde dice left: -100px; ahi cambia el valor por otro, quiza con eso puedas modificar la posicion de la imagen agrandada (eso dependera de tu plantilla)
    Saludos.

    ResponderEliminar
  79. apliqué esto con un iframe, me funciona bien en firefox y chrome, pero en ie se despliega la ventana pro no se ve el iframe. Qué hago? aplico un estilo para ie?

    ResponderEliminar
  80. Quizá se trate de la versión de tu navegador, al menos yo no he tenido problemas con los iframes en la última versión oficial de IE, que es la 8.

    ResponderEliminar
  81. Hola
    tengo unas quantas imagenes en posicion horizontal, como puedo centrar la imagen grande para que no me me haga scroll lateral la web?
    Muchas gracias

    ResponderEliminar
  82. Pero es possible que aparezcan todas en el mismo sitio (centro de la pantalla)?
    Muchas gracias

    ResponderEliminar
  83. Sin que se recorran no con este método.

    ResponderEliminar
  84. oye "El Potro", el script me funciono pero la imagen sale en tamaño pequeño para darte una idea, mira mi pagina, y baja adonde dice afiliados y ahi miras http://xd-dd.blogspot.com/

    ResponderEliminar
  85. Posiblemente algún estilo de tu plantilla tiene predeterminado que los span o las imágenes de la sidebar no excedan esas medidas.

    ResponderEliminar
  86. exelente compadre saludos de peru tu aporte me fue muy valioso exitos para ti por tus aportes

    ResponderEliminar
  87. muchas gracias.

    a mí me ha servido para una lista de entradas de mi blog con una pequeña trampa, aplicándola a un icono adjunto a la imagen que así mantiene el enlace.

    a class="thumbnail" href="#thumb" img src="URL del icono" height="15px" border="0" / span img src="URL de la imagen" width="300px"/ /span /a

    a href="URL de la del enlace" img width="70" align="left" src="URL de la imagen"/ Pie de foto /a

    teniendo en cuenta que los cuatro datos que hay que introducir se refieren siempre a la misma entrada y he de introducirlos manualmente ¿hay alguna forma sencilla, para alguien que no tiene idea de programación, de hacer que introduciendo la URL automáticamente se rellenen los otros 3?

    ResponderEliminar
  88. Me temo que no, al menos no con este tipo de métodos. Posiblemente con códigos más avanzados de Javascript pueda hacerse pero te mentiría si te dijera que con certeza eso es cierto. Sin embargo, si supiera de algo lo publicaré en seguida.

    Saludos.

    ResponderEliminar
  89. Hola El Potro, me funcionó a las mil maravillas, le hice un par de modificaciones pa que la imagen agrandada me saliera desde el centro en vez que salga desde abajo, pero tengo un problema:

    Después que agrego el código para una imagen y quiero seguir editando mi entrada (regreso a la pestaña "Redactar") y al querer agregar otra imagen (voy a la pestaña Edicion de HTML nuevamente), me doy con la sorpresa que en el código de la anterior imagen blogger ha hecho cambios:

    - Ha cambiado el enlace de la imagen
    - Ha borrado la etiqueta "span"

    El problema me sale tanto con el codigo que puesiste como con el codigo que edité

    Como soluciono esto, debo estar cambiando el codigo cada vez que regrese a la edicion de HTML?


    Gracias de antemano por tu respuesta y disculpa por hacerte leer tanto.

    ResponderEliminar
  90. Hola Chewaka999,

    Siempre que se cambia a la pestaña Redactar se cambian los códigos. Necesitas cargar todas tus fotos, aplicar el formato a tu texto y ya cuando tengas todo listo cambia a la pestaña Edición de HTML y ahí aplica los trucos que necesites pero sin cambiar de nuevo a la pestaña Redactar.

    Saludos.

    ResponderEliminar
  91. Puff... ni vuelta que darle, OK gracias por el aviso y gracias por tu blog -> lo máximo

    ResponderEliminar
  92. Hola!!

    Magnifico aporte, pero me surge una duda. Quiero aplicar el truco para una tira de imagenes, entonces para las primeras me viene perfecto que se abra la ampliacion desde el extremo inferior derecho hacia la derecha, pero en las ultimas fotos de la linea necesitaria que las ampliaciones se abrieran desde el extremo inferior izq y hacia la izquierda.

    Con esto conseguiria que todas las ampliaciones quedaran dentro de la vision de la pantalla y no que en las fotos que están mas a la derecha se amplia la web y tendriamos k mover la barra del navegador.

    Espero haberme explicado bien y puedas ayudarme.
    Muchas gracias de antemano!

    ResponderEliminar
  93. Tendrías que poner nuevamente el primer código pero cambiar los .thumbnail por .thumbnail2
    Luego donde dice left: -100px cambiarlo por otro valor hasta que se ajuste a la posición que deseas.

    Por último, en las imágenes que quieras que se vean así cambia en el segundo código esta parte:
    class="thumbnail"

    Por esta:
    class="thumbnail2"

    ResponderEliminar
  94. Hola
    Cual es el codigo que debo modificar para que la imagen que se agranda lo haga encima de la pequeña y no abajo?
    Gracias

    ResponderEliminar
  95. Hola YO de nuevo
    Que parte de este codigo debo modificar para que la imagen grande aparezca sobre la pequeña y no debajo cuando paso el mouse por encima?

    Mil gracias

    body {
    background-image: url(images/baseregalos.jpg);
    }
    .thumbnail{
    position:relative;
    z-index: 0;
    }

    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }

    .thumbnail span{ /*CSS for enlarged image*/
    position:absolute;
    background-color: transparent;
    padding: 0px;
    left: 0px;
    border: 0px dashed gray;
    color: #FFFF00;
    text-decoration: none;
    z-index: 1;
    visibility: collapse;
    }
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 0px;
    }

    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 0;
    left: 10px; /*position where enlarged image should offset horizontally */
    }

    ResponderEliminar
  96. Con este método depende mucho de cada plantilla y no en todos los casos se puede hacer, sin embargo una forma más sencilla es con este método:
    http://ciudadblogger.com/2009/09/agrandar-imagen-al-pasar-el-mouse-ii.html

    ResponderEliminar
  97. Hola, soy nueva en esto de los blogs, tu aplicacion me parece exelente, pero tengo un problemita y es que cuando la imagen se agranda hay una parte en que se ve lo que esta detras de la imagen... como translucido...como puedo cuadrarlo?... gracias

    ResponderEliminar
  98. Hola Gloria,

    Entré a tu blog y vi una imagen con este efecto de agrandar y no vi que se transparentara y se mostrara el fondo, vi la imagen agrandada perfectamente, no sé si es otro el problema el que mencionas o si ya lo habrás solucionado.

    Saludos.

    ResponderEliminar
  99. Amigo una consulta hice todo y perefctamente pero quiero hacer una cosa quiero que la imagen una vez ampliada pueda hacer clik en ella y me lleve a un archivo pdf
    Como lo hago

    Gracias

    ResponderEliminar
  100. Hola Leonardo,

    Cambia donde dice #thumb por la URL del archivo PDF subido previamente a un hosting.

    Saludos.

    ResponderEliminar
  101. Hola, se puede hacer por este método que cuando muestre la imagen grande, al pasar el mouse por la grande me muestre otra?
    Esto es lo que debo hacer:
    1. de una imagen pequeña mostrar la grande
    2. cuando muestre la grande al pasarle el mouse que me muestre otra imagen.
    Muchas grecias...

    ResponderEliminar
  102. Hola Jenny,

    En lugar del segundo código usa este:

    <a class="thumbnail" href="#thumb"><img src="URL de la imagen original" width="100px" height="80px" border="0" /><span><img src="URL de la imagen original" onmouseover="this.src='URL de la imagen al pasar el mouse';" onmouseout="this.src='URL de la imagen original';"/><br />Pie de foto</span></a>

    Cambia las URLs de las imágenes donde se indica y tendrás los resultados que deseas.

    ResponderEliminar
  103. perdona sino lo he leido todo y alguien lo ha preguntado pero existe la posibilidad que pongas la imagen en tamaño grande y al pasar el raton por encima salga el tamaño real, que sea algo autómatico de un script?

    ResponderEliminar
  104. No sé si haya algún script que lo haga, pero de haberlo de todas formas tendrías que modificar el código de la imagen aunque sea un poco ya que nada es 100% automatizado.

    ResponderEliminar
  105. Hola me podrias explicar como y en donde tengo que poner esos dateos por que la verdad que no encuentro!! espero tu respuesta "POTRO" desde ya muchas gracias!!

    ResponderEliminar
  106. En primer código ahí se explica dónde debe ponerse, el segundo lo puedes poner en una entrada.

    ResponderEliminar
  107. hola, tengo el mismo problema que gloria (102)al agrandar la imagen queda superpuesto un menú de la barra lateral, que puedo hacer para que se vea bien la imagen.

    ResponderEliminar
  108. Posiblemente sea por una modificación que hayas hecho en la plantilla. Prueba buscando dentro del primer código que pegaste, esta parte:
    position: absolute;

    Y cámbiala por esta:
    position: absolute !important;

    ResponderEliminar
  109. lo intenté pero no hay cambios, me puedes dar otra sugerencia, la verdad yo no soy un experto en estos temas.
    Gracias

    ResponderEliminar
  110. Quizá quieras probar con otro método para agrandar imágenes:
    http://ciudadblogger.com/2009/09/agrandar-imagen-al-pasar-el-mouse-ii.html

    ResponderEliminar
  111. Muy buenas, tengo una duda que me está volviendo loco. tengo una página con varias imagenes en el index y me gustaría que al pasar por ellas se hicieran grandes. Hasta ahí bien, conseguido, pero el problema es que me gustaría que se hicieran grande en el medio de la pantalla para que no se salgan por tamaño y no lo consigo. Como tendría que modificar el código??? Muchisimas gracias.

    ResponderEliminar
  112. Hola Oscar,

    Si la cuestión es centrar la imagen agrandada entonces mira el comentario #81, o bien, usando este otro método me parece que se centra de forma automática.

    ResponderEliminar
  113. Muy buenas Potro, me he dado por vencido y ya no voy a centrar la imagen. Ahora tengo otro problema y es que en IE8 salen las fotos ampliadas por detrás de las normales!! No consigo que salga bien por mucho que modifico el código. En IE9, firefox, chrome salen bien.

    ResponderEliminar
  114. ¿Por qué no pruebas con el otro método que te dije? Ese no deberá darte esos problemas y es un código mucho más simplificado. Lamentablemente los navegadores tienen su manera de interpretar las cosas, y aunque el código está probado en IE8 es posible que haga conflicto con los estilos de tu plantilla.

    ResponderEliminar
  115. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  116. Gracias por estos tutoriales tan bien explicados...Realmente me han ayudado demasiado y falicitado en mucho... Gracias potro por tu ayuda con nosotros los principiantes

    ResponderEliminar
  117. Gracias a ti Julian por tu visita y amable comentario.

    ResponderEliminar
  118. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  119. Puedes hacer algo parecido con los tooltips:
    http://ciudadblogger.com/2010/07/tooltips-con-css.html
    http://ciudadblogger.com/2010/08/tooltips-con-jquery.html
    http://ciudadblogger.com/2011/03/tooltips-con-css-en-forma-de-burbuja.html

    ResponderEliminar
  120. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  121. perdon era este : http://ciudadblogger.com/2011/01/leer-mas-con-imagenes-en-miniatura.html no ese ajjajajaaj siento por repost jjaja

    ResponderEliminar
  122. No conozco un sistema de tooltips que haga eso, al menos no automáticamente. La velocidad en la que aparece es para todos igual, mucho depende de la velocidad de carga del blog, pero no del tooltip en sí ;)

    ResponderEliminar
  123. Hola Potro. Al fin pude agrandar una imagen al pasar el raton y gracias a tu ayuda.
    Seria un honor para mi que veas como quedo lo que aprendi sobre este tema en mi pagina http://mi-biblioteca-musical.blogspot.com.
    La verdad que sos una excelente persona al compartir tus conocimientos con aquellas que quieren aprender.
    Saludos

    ResponderEliminar
  124. Te ha quedado perfectamente bien Jesica. Muchos éxitos, y gracias por tu amable comentario!

    ResponderEliminar
  125. Amigo, esta bueno el efecto pero tengo el mismo problema que tenes vos en tu ejemplo, al agrandarse la foto hay parte que queda tapada por la sidebar lateral, lo pudiste arreglar eso?

    ResponderEliminar
  126. No, pero puedes centrar un poco la imagen para que no esté pegada a la sidebar (como acabo de hacerlo ahora), eso puedes modificarlo donde dice left: -100px; por otro valor, o donde dice left: 10px;

    ResponderEliminar
  127. hola todo salio perfecto pero ahora mi problema es que tengo dos columnas con imagenes pero quiero que las de la derecha me las muestre a la derecha y las de la izquierda me las muestre a la izquierda como hago eso

    ResponderEliminar
  128. Hola rio,

    Tendrías que poner otra vez el primer código y cambiar todos los .thumbnail por .thumbnail2
    Luego en la parte donde va la imagen cambiar el class="thumbnail" por class="thumbnail2"
    Por último cambiar left: -100px; por otro valor, o donde dice left: 10px;

    Eso hará que los que tengan como clase "thumbnail2" la imagen se agrande en otra dirección.

    ResponderEliminar
  129. Enrique: disculpen realmente me interesa mucho saber usar este efecto pero no logro conseguirlo, exactamente donde va el primer codigo???

    ResponderEliminar
  130. En la entrada dice exactamente dónde va.

    ResponderEliminar
  131. mira potro ayudame canijo, estoy programando en html desde dreamweaber y tengo el problema, yo pongo el primer codigo entre head y /head y el segundo lo pongo en body.

    porfa hecha mano, ahora cuando habro el archivo html me muestra como texto la primera parte del codigo, y las imagenes me muestra una chica y la otra ya grande porfa haber si me ayudas canijo muy bueno tu blog. mi correo es detodopublicidadweb@hotmail.com porfa ayuda

    ResponderEliminar
  132. Cuando trabajas en un sitio web los estilos (el primer código) deben ir antes de </head> pero encerrados entre:
    <style> y </style>

    ResponderEliminar
  133. Hey!, hay un efecto de Imagen que he querido hacer, no se como explicarlo asi que te pondre la url del blog:) andwhatcomesnext.blogspot.com cuando pasas el mouse sobre la imagen de la entrada esta cambia de forma:) & tambien si puedes la de la imagen transparente(: Gracias~

    ResponderEliminar
  134. Hola Lalilo,

    Sólo agrega antes de ]]></b:skin> esto:

    .post img {
    opacity: 0.8; filter:alpha(opacity=80);
    border: 1px solid transparent;
    border-top-left-radius: 0px;
    border-top-right-radius: 120px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 120px;

    }
    .post img:hover {
    opacity:1;
    filter:alpha(opacity=99);
    cursor: help;
    border-radius:0;
    }

    Lo que está en negrita es el tipo de borde que tendrá la imagen.
    Saludos.

    ResponderEliminar
  135. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  136. Hola Martín,

    Cuando lo pongas en la entrada hazlo desde la pestaña Edición de HTML y no cambies para nada a la pestaña Redactar:
    http://ciudadblogger.com/2009/11/como-poner-los-codigos-correctamente-en.html

    ResponderEliminar
  137. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  138. Eso mismo realize Potro pero me sigue pasando igual, me deforma la esctructura y me muestra la img pequeña y al lado la img aumentada =S.

    ResponderEliminar
  139. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  140. Disculpa Potro lo use con otra plantilla y logre el efecto,
    Ahora la pregunta es como puedo hacer para que la img ampliada aparezca por encima de la miniatura pero centrada en ella misma.
    Vi el otro sistema v2 que publicaste pero ese estira el post y no aparece por encima, salvo que alla una solucion a ello y sea mas facil aplicar lo que te comento Potro.
    Un saludo que andes bien.

    ResponderEliminar
  141. Para centrarla cambia esta línea:
    .thumbnail:hover span{ visibility: visible; top: 0; left: 10px; }

    Por esto:
    .thumbnail:hover span {
    visibility: visible;
    left: -100px;
    top: -100px;
    }

    Esos dos últimos valores puedes modificarlos hasta que quede a la altura que deseas.
    Saludos.

    ResponderEliminar
  142. Hola Potro: 1º se puede colocar una url a la imagen para que linkee una página? y 2º se pueden poner varias imágenes en un mismo post con este sistema, o solo una? Abrazos

    ResponderEliminar
  143. Hola Enrique,

    Se pueden poner varias imágenes en una misma entrada, todas deberán funcionar sin problema.
    Pero no se les puede añadir un enlace, ya que las imágenes se encierran en un código tipo enlace para que funcione el "zoom". Sin embargo hay otro método con el que podrías agregar enlaces a la imagen:
    http://ciudadblogger.com/2009/09/agrandar-imagen-al-pasar-el-mouse-ii.html

    Saludos.

    ResponderEliminar
  144. Hola buen post , pero yo quiero saber si se puede utilizar para hacer layouts porque en los layouts no llevan head ni body , me puedes ayudar a ponerlo en un layout que solo incluye divs y imagemaps?

    ResponderEliminar
    Respuestas
    1. Sólo he trabajado en esta plataforma edgar, no sé cómo sea en el resto.

      Eliminar
    2. de todas formas gracias men :) si llegas a saber como se le hace me lo haces saber .gracias buen dia :)!

      Eliminar
  145. Hola, tengo una imagen y me gustaria que al pasar el mause por una parte especifica solo se agrande esa parte y no todad la imagen, es urgenteeeeeeee pofa

    ResponderEliminar
    Respuestas
    1. No se puede, pero lo que sí se puede es que uses un efecto de zoom:
      http://ciudadblogger.com/2010/09/aumentar-imagenes-con-zoom-it.html

      Eliminar
  146. tengo un prolema, tengo barias fotos en la misms linea,la de un lateral no se ve centrada cuando se agranda, http://www.eloyestilista.es/PROTESIS%20%20.htm

    la linea se puede ver con el explorador chrome fila: 187

    donde debo poner ese codigo

    ResponderEliminar
    Respuestas
    1. Con el método que has usado sólo se puede ver centrado cuando es una imagen única y a los lados no hay nada, de lo contrario para como las demás fotos, que al agrandarse las desplaza hacia los lados. Quizá sería más conveniente usar algún sistema de ventanas modales como Shadowbox:
      http://ciudadblogger.com/2010/04/shadowbox-ventanas-modales-multimedia.html

      Eliminar
  147. HOla, se puede utilizar Shadowbox en google site?
    He hecho varias pruebas con Lightbox pero no consigo que la imagen salga a pantalla completa, se queda siempre dentro del gadget donde lo creé y no he encontrado forma de poner código javascript dentro de una página de google site.

    Te agradezco de veras tu respuesta pq llevo muuuuuucho tiempo invertido en esto.

    S2

    ResponderEliminar
    Respuestas
    1. Hola miguel, a decir verdad sólo he usado Google Sites para alojar archivos, desconozco qué tanto se pueda hacer ahí y qué aplicaciones se puedan utilizar. Saludos.

      Eliminar
  148. Potro quisiera saber si se le puede personalizar el tamaño de la letra de la descripción de la imagen???

    ResponderEliminar
    Respuestas
    1. Por supuesto Mauricio, debajo de .thumbnail span{ agrega:
      font-size:13px;

      Eliminar
  149. Hola , perdon una pregunta e ucoz donde tengo que poner los codigos, por que no pude encontrar el codigo (]]>)
    Gracias

    ResponderEliminar
  150. Respuestas
    1. Usa las teclas CTRL + F, así te será más fácil encontrar los códigos.

      Eliminar
  151. Potro una pregunta: Sera que se pueden poner los bordes redondeados?, es que el recuadro se ve muy obsoleto con esas esquinas.....

    ResponderEliminar
    Respuestas
    1. ¿Al pasar el cursor? claro, agrega esto:

      .thumbnail:hover span, .thumbnail span img {
      border-radius:30px;
      }

      Eliminar
    2. Eso era justo lo que quieria Potro Miiiiiillllllllll GRACIAS....!!!

      Eliminar
  152. Hola potro, quisiera implementar este efecto, pero sólo en algunas imágenes, no en todas las del blog, concretamente quiero poner una imagen en el costado del blog y que haga este efecto, ¿será posible?

    ResponderEliminar
    Respuestas
    1. Hola lalo landa, este efecto no es automático, se aplica sólo a las imágenes que quieras.
      Saludos.

      Eliminar
  153. Hola potro si quisiera poner el código a mi pagina donde lo debo de poner para que me funcione, por que lo e intentado pero me salen dos imágenes nada mas, una mas grande que la otra.

    ResponderEliminar
    Respuestas
    1. Hola mauro, en la entrada dice dónde se ponen los códigos, sólo tienes que ponerlo justo donde se indica. Si tuvieras problemas dime en cuál blog lo has puesto.

      Eliminar
  154. Buenazo este post, aunque me falta configura la imagen y no se como, pero de todas maneras queda un poco bién, y muchas gracias por el post ya que es entendible, gracias a uds. se mejora en algo; aunque a veces se malogra je je.
    Gabriel.

    ResponderEliminar
    Respuestas
    1. Lo demás será experimentación y práctica, los dos puntos más importantes ;)

      Eliminar
  155. Esto es increíble!.. pero, por si ves este mensaje... sabes si esto sería aplicable a foros? Tengo en mente un proyecto para mi foro bastante grande y sería genial tener esto... básicamente, poner en el HTML del foro un código, y que, cada vez que un usuario ponga una imagen con Link_imagen1, pase como arriba, cada vez que pases el cursor por encima de la imagen1, aparezca un recuadro con otra imagen, Link_imagen2. O sea, que yo, en el html del foro, declare "link_imagen1, link_imagen", y así, cada vez que un usuario ponga la imagen 1 en algún tema, se active el código para esa imagen y, si pasas por encima, aparezca la imagen 2...

    y eso se aplicaría a muchas imágenes, teniendo el código general en el html el usuario podría usarlo sin problemas. Pero bueno, esa no es la cosa de que si funcionaría en foros >_<

    ResponderEliminar
  156. Te detallo mi idea por si a caso:
    en el HTML general del foro pondría un código:
    ... .... ...
    y más abajo:
    mostrar(URL1, URL2);
    mostrar(URL3, URL4);
    etc etc

    entonces, SIEMPRE que cualquier usuario del foro pusiera en un mensaje una imagen con su url URL1, pasaría lo que has puesto en esta entrada: al pasar el cursor por encima de la imagen de url URL1 muestra la imagen URL2 flotante, que desaparece al apartar el cursor.
    Siempre que alguien ponga una imagen de URL3, lo mismo, mostraría la imagen URL4 al pasar por encima, etc.

    la cosa es que yo daría una série de imágenes, registraría en el HTML sus URLS, y entonces se aplicaría tu código para esas imágenes siempre que alguien las pusiera. Estás familiarizado con eso, sería posible? Sin duda sería una ayuda tremenda eso... y el código sería el mismo que el que has puesto aquí cambiando que las URLS las pongo yo a parte...

    ResponderEliminar
  157. Hola! He visto este mensaje tuyo, http://ciudadblogger.com/2012/04/aumentar-imagenes-al-pasar-el-cursor.html con ese aporte me lo has solucionado todo, olvida todo lo que dije antes! Me funciona genial en mi foro (sí, foro) muchas gracias!!

    ResponderEliminar
  158. Hey, que tal... La verdad está genial tu blog, muy completo... Pero tengo una gran duda... Estoy comenzando a editar en dreamweaver y a verdad lo conozco muy poco... La duda es; ¿en qué parte del html de dreamweaver puedo meter el código para que funcione bien...

    Saludos

    ResponderEliminar
  159. Hey, qué tal "El Potro". recién estoy usando dreamweaver y tengo una serie de dudas con respecto a este tema... Por ejemplo, mencionas que hay que poner el código después de ]]>. Estoy trabajando con dreamweaver y no é en qué parte del documento se pone el código que proporcionas...

    Saludos

    ResponderEliminar
    Respuestas
    1. Hola Milo de la O, muchas gracias por tu comentario. Sobre otras plataformas no te puedo asesorar ya que todo lo que hay aquí sólo lo pruebo en Blogger. Sin embargo, en las páginas web los estilos que van antes de ]]></b:skin> se colocan en el archivo CSS de la página, o entre
      <style> y </style> después de <head>
      El otro código iría dentro de <body> y </body>

      Eliminar
  160. Hey, gracias, gracias... Me ha sido de mucha ayuda...

    Saludos

    ResponderEliminar
  161. Hey, gracias, gracias... Me ha sido de mucha ayuda...

    Saludos

    ResponderEliminar
  162. Ahora, tengo otra duda... El código me funciona perfectamente pero al pasar el mouse sobre la imagen me la pone detrás de la que sigues... tengo 9 imágenes formadas de 3 en 3, pero cuando paso en la primera me la pone detrás de la segunda y así... Cómo puedo hacer para que la imagen agrandada se vea sobre todas las demás y así con cada una...

    Saludos...

    ResponderEliminar
    Respuestas
    1. Hola Milo de la O, ¿me puedes mostrar una entrada o gadget donde lo hayas puesto?

      Eliminar
  163. ME Encantan tus Tutoriales mi blog no seria nada sin ellos... Aproposito... Quisiera Saber si conoces un truco para hacer lo mismo pero con fondo de otra imagen y que el fondo quede en su lugar nadamas la imagen quede con zoom... Ejemplo: (los [] son el fondo y el o es la imagen)------ [o] (sin pasar el cursor) [O] (al pasar el cursor)

    Si sabes o ya tienes el truco pasame el link Porfavor...

    PD: Eres Super Fantastico y tu Blog Tambien!!

    ResponderEliminar
    Respuestas
    1. Te lo debo, no conozco algún método como el que mencionas :(
      ¡Saludos y gracias por tu comentario!

      Eliminar
  164. uff al fin lo encontré después de tanto buscar XD grasias y se puede hacer al pasar el cursor por el texto ?

    ResponderEliminar
  165. Amigos no hay uno donde uno coloque el puntero del mouse en un lugar especifico y muestre el nombre de ese lugar.

    ResponderEliminar
  166. Buenos días no eh podido colocar ese código exactamente en que parte del html voy agregar el primero? se que el segundo es referenciar me podrías especificar donde insertarlo y disculpa!!

    ResponderEliminar
    Respuestas
    1. Hola, el primero lo agregas en la edición HTML de tu plantilla que está en la sección "Plantilla", ahí localiza donde dice <b:skin>...</b:skin> y da click en la flechita de al lado, al expandirse busca ]]></b:skin> y justo antes de eso pega el primer código.

      Eliminar
  167. como cambio la posicion de la imagen agrandada, estoy armando una galeria y las q estan por debajo se cortan al agrandarse.

    ResponderEliminar
  168. como hago para cambiar la posicion de la imagen agrandada? tengo una galeria y a las de abajo no salen completas.

    ResponderEliminar
  169. como cambio la posicion de la imagen agrandada, estoy armando una galeria y las q estan por debajo se cortan al agrandarse.

    ResponderEliminar
    Respuestas
    1. En el left: -100px; puedes cambiar la posición a los lados. Si quieres cambiar la posición vertical entonces modifica el top: 0; por un valor negativo, por ejemplo top:-50px;

      Eliminar
  170. es posible hacer ese mismo efecto pero en un menu ? imaginense tiene un menu lisa lo despliegan y sale el nombre su artista favorito es posible hacer eso en el menu al colocar el cursor encima del nombre d la persona ?

    osea :

    michael jackson ... cuando desplegastes el menu t salio el nombre de michael y colocastes tu cursor sobre el y al hacer eso a un lado aparece una foto de el ... eso es posible con un menu lista ?? si es asi me dejarian el cod para ponerlo en html ( Dreamweaver cs6) se los agradeceria muchisimo

    ResponderEliminar
  171. es posible hacer eso en un menu lista ? q al desplegar el menu y te salga el nombre del artista y el usuario colocar el cursosr encima del nombre al lado aparesca una foto del mismo ?? si es asi me dejarian el cod en html ? lo estoy heciendo en dreamweaver cs6

    ResponderEliminar
    Respuestas
    1. No sé decirte Emilio, nunca he intentado hacer algo similar.

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger