Cambio de imagen con hover | Oloblogger Este truquillo tiene diversas aplicaciones, aunque en un principio, sólo se trata de crear unas clases CSS, para que al pasar el puntero por...

26 de octubre de 2010

Cambio de imagen con hover

Este truquillo tiene diversas aplicaciones, aunque en un principio, sólo se trata de crear unas clases CSS, para que al pasar el puntero por una imagen, se pueda solapar otra por encima.

Esta sería la parte CSS común:

#contenedor {
position: relative;
}
.miniatura{
z-index: 1001;
text-decoration: none;
}
.miniatura img {
border: 0px;
}
.miniatura span {
position: absolute;
text-decoration: none;
visibility: hidden;
border: 0px;
top:0px;
left:0px;
}
.miniatura:hover span {
visibility: visible;
overflow:visible;
z-index: 1002;
}

La primera utilidad que se me ocurre es que haya dos imágenes iguales y la primera se muestre más pequeña para que el hover funcione a modo de ampliación de miniatura.


<div id="contenedor">
<a href="javascript:void(0);" class="miniatura">
<img src="URL_IMAGEN" alt="" style="width:100px;" />
<span><img src="URL_IMAGEN" alt=""/></span>
</a>
</div>

Lo único a destacar en este HTML es que las dos direcciones de imagen son idénticas (es la misma imagen), pero la primera incluye un WIDTH para forzar su menor tamaño. La segunda, en este caso y en los siguientes, siempre estará "rodeada" por un SPAN para provocar el efecto HOVER.

Otra forma de utilizar este CSS, sería para simular un rollover sin utilizar JavaScript.


El código HTML sería el mismo de antes, pero sin incluir ningún WIDHT y utilizando una segunda imagen, que en este caso era la misma pero invertida.

<div id="contenedor">
<a class="miniatura" href="javascript:void(0);">
<img alt="" src="URL_IMAGEN1" />
<span><img alt="" src="URL_IMAGEN2" /></span>
</a>
</div>

Podemos aprovechar este mismo codigo para mostrar una información adicional, complementaria o incluso un detalle, con respecto a la imagen base.



En esta ocasión, no ha sido necesario utilizar el WIDTH, puesto que las dos imágenes ya las hemos construido del tamaño que nos venía bien. No obstante, se podrían haber redimensionado como antes sin problemas.

Otra posiblidad más. Ahora sustituimos la segunda imagen por un texto y añadimos estilo al SPAN.


<div id="contenedor">
<a class="miniatura" href="javascript:void(0);">
<img alt="" src="URL_IMAGEN1" />
<span style="background:#ffffff;padding:10px;">Trichogaster Leeri. Procede de ríos de aguas tranquilas y densamente plantados de Malasia, Borneo y Sumatra. El macho tiene el cuerpo más rojo y sus aletas anal y dorsal alargadas.</span>
</a>
</div>

Para un efecto algo distinto, podeis cambiar en el CSS, los valores de TOP y LEFT, de manera que el segundo elemento, salga desplazado con respecto al vértice superior izquierdo del primero.


En fin, ahí queda la idea y que cada cual le de el uso que necesite. Y si se os ocurren más ¡no dudeis en comentarlo!

Nota: ¿Esto te viene bien Jaime? ;)

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

57 comentarios :

  1. Pues hombre... te pasaste!!! claro q esta excelente tu tutorial, ahora a echarlo en mi sopa de codigos, gracias Oloman =)

    ResponderEliminar
  2. Es genial poder echar mano de un truco así para blogger, había visto aplicaciones similares pero nunca tan bien expuestas dan ganas de ir hacer fotos :D
    Saludos !

    ResponderEliminar
  3. me podrias promocionar mi blog no tiene publico te pido por favor piensalo y responde¿?

    ResponderEliminar
  4. Jaime y Carolum, como dice un amigo "menos es más". Sin resultar espectacular, el codigo es muy sencillo y ocupa poco.

    Francesco, ya te he contestado en los otros tres mensajes anteriores: no me dedico a promocionar nada, ni siquiera lo mío. Lo siento.

    ResponderEliminar
  5. ola, tenia rato que no pasa poraqi pero me gusta el nuevo cambio de letra en las entradas :)

    ResponderEliminar
  6. Muy bueno!!!demasiado simple y sencillo!! ponemos este post en favoritos, gracias Oloman!

    ResponderEliminar
  7. CHICken, pues que sepas que me ha costado hacerlo. Y de hecho todavía ando haciendo cambios en eso. No me veo sin mi Comics, pero también es cierto que ya me había aburrido.

    LuzdeLuna, encantado de verte por aquí :D

    ResponderEliminar
  8. Hola, Oloman, la verdad soy muuuy bruta y no sé dónde poner el primer código. ¿Me ayudas?

    ResponderEliminar
  9. El primer código lo tienes que poner antes de /b:skin. Entre las etiquetas SKIN es dónde va siempre toda la parte de estilo o CSS

    ResponderEliminar
  10. ¡¡Wow, gracias!! Ya quedó, la otra vez lo intenté y nada mas no pude. Vales mil, besos.

    ResponderEliminar
  11. CADA DIA SE APRENDE ALGO NUEVO, EXELENTE COMO SIEMPRE

    ResponderEliminar
  12. Pues sí. Siempre hay alguna forma nueva de utilizar lo de siempre ;)

    ResponderEliminar
  13. Hola al paleto de turno le gustaría saber si este código lo puedo meter en un gadget o en una entrada directamente o tengo que meter el codigo en lo de edicion de plantillas

    ResponderEliminar
  14. Hola San Francisco. De paleto nada, que aquí quién más y quién menos, a todos nos queda mucho por aprender ;)

    Sobre la pregunta, si lo vas a usar más de una vez, te conviene poner el código CSS en la plantilla. Luego, la parte HTML la pondrás individualmente para cada imagen, allí dónde quieras que aparezca: en una entrada, en la cabecera, en la barra lateral...

    Si sólo lo vas a usar esporádicamente, se puede meter todo en cada entrada que sea necesario. Lo único que tienes que tener en cuenta en este caso es que todo tiene que ir seguido, sin saltos de línea.

    ResponderEliminar
  15. hola! un efecto muy bonito!
    mi pregunta es si hay forma de hacer una secuencia de fotos con este efecto, es decir, en una misma entrada poner varias fotografías, unas al lado de otras (tipo galería). Lo he intentado pero siempre se colocan unas debajo de otras.
    Un saludo y gracias!

    ResponderEliminar
  16. Moblelar, para que se queden en la misma línea tendrás que meter todas las imágenes dentro de un solo DIV CONTENEDOR. Si pones cada una en uno, siempre habrá un salto de línea tras cada una. También deberás evitar saltos de línea insertados por tí o por tu editor de entradas. Y por supuesto, todas tienen que caber dentro del ancho disponible.

    ResponderEliminar
  17. esta muy bueno el efecto man... pero mi pregunta es, se puede crear una lista de imagenes en secuencia ( en un orden horizontal, no solo vertical) .... hay alguna forma ?

    ResponderEliminar
  18. Comentario #16 Ariasjk. Justo encima del tuyo :)

    ResponderEliminar
  19. Hola se puede por ejemplo hacer eso con "leer mas"
    osea que cuando pases el puntero se agrande esa frase?

    si es asi explicame por favor que codigo me conviene

    ResponderEliminar
  20. Anónimo9/8/11, 1:54

    te aclaro que puse sumarios

    ResponderEliminar
  21. Esto de aquí no te sirve para el leer más porque no se trata de una imagen Rodrigo.

    Si quieres utilizar una imagen como enlace para "leer más", mejor ves este otro truco. Sólo tendrías que cambiar .jump-link por .leermas y funcionaría exactamente igual. También se explica cómo hacerlo usando sólo texto:

    Modificar el aspecto del corte "Más información"

    ResponderEliminar
  22. ALGUIEN sabe como eliminar automaticamente imágenes dentro del texto en blogger?
    Problema: estoy publicando directo por email. Los emails a veces incluyen avisos no deseados al pie. Quisiera lograr automatizar que esas imágenes desaparezcan o al menos no sean inluidas en los RSS ya que los tomo desde otro portal.
    Lo ideal sería reemplazar, pero sino se puede eliminar cualquier etiqueta <img o directamente transformar el artículo en texto plano nada más. GRACIAS!

    ResponderEliminar
  23. ¿Todas las imágenes de los posts? No sé si funcionará, pero prueba con .post img {display:none !important; visibility:hidden !important; width:0 !important; height:0 !important;}

    .post-body img si es una plantilla de las del nuevo diseñador. Si tiene otra personalización, tendrás que encontrar que clase es la que corresponde en tu caso para las entradas.

    ResponderEliminar
  24. Con esto, ¿Cómo pongo una imagen que dirija a una url con el efecto hover en una imagen?

    Es el efecto de cuando pongo el cursor encima de la imagen cambie a otra imagen.

    ResponderEliminar
  25. Abraham, no he entendido eso ¿lo que quieres es que al pasar el puntero por encima de una imagen, funcione como si fuera un enlace y se vaya a otra dirección?

    ResponderEliminar
  26. ¡Hola! He conseguido poner imágenes seguidas en horizontal tal como explicas en los comentarios, pero lo que me ocurre es que la imagen que reemplaza cada una de ellas me aparecen encima de la primera en lugar de aparecer encima de la que le corresponde, he probado varias cosas pero no consigo solucionarlo ¿alguna idea? Gracias.

    ResponderEliminar
    Respuestas
    1. ¿Me pasas el link de la página dónde lo tienes puesto?

      Eliminar
    2. Aquí es: http://cdobleweb.wordpress.com/el-equipo/
      He probado a modificar position en el css, pero nada.

      Eliminar
    3. Creo que en tu caso sería mejor otro sistema que se me ha pasado por la cabeza. Es muy parecido pero tendría que ponerme a hacer pruebas y ya que lo hago, lo publicaría para todos. El otro motivo es que me gustó mucho tu idea. A ver si saco un rato

      Eliminar
  27. Diculpa mi ignorancia. Este post parece brillante y es justo lo que busco pero no se como insertar el css. Debe insertarlo tal cual? pasa algo si ya tengo otro css en la misma página...?
    muchas gracias.
    .J

    ResponderEliminar
    Respuestas
    1. Hola. El CSS en Blogger lo tienes entre las etiquetas SKIN de la plantilla y en las plantillas del nuevo diseñador también lo puedes añadir desde opciones avanzadas. Y no, un añadido no interfiere con el que ya tengas, salvo que use los mismos nombres de clases: .contenedor, .miniatura, etc. (Ver esto)

      Eliminar
  28. Otra cuestión: es posible situar imagenes (con el codigo que has compartido), una al lado de la otra, horizontalmente en una misma página?
    ajalá puedas ayudarme, muchísimas gracias

    ResponderEliminar
    Respuestas
    1. Este comentario tuyo se había ido al spam y lo he visto por las notificaciones del correo. Se ve que a Blogger no le gustan los comentarios muy seguidos ;)

      Sí se pueden poner juntas en horizontal, aunque complica un poco el código. De todas formas el código exacto dependerá de cual de las anteriores opciones quieras utilizar.

      Eliminar
  29. El rollover lo he logrado, pero me falta poder hipervincular las imágenes a una url, use la segunda opción. he probado con href= url antes del div pero me separa las imágenes y solo me vincula una de ellas a la url. Desde ya gracias por el aporte!!

    ResponderEliminar
    Respuestas
    1. Hola. Esto es un poco de programación recreativa. Si quieres poner un enlace mejor usa este otro sistema

      Eliminar
  30. muchas gracias, me ha servido de mucho.

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

    ResponderEliminar
    Respuestas
    1. Tendría que saber en cual de tus blogs estás probando para ver el código y si es posible adaptarlo, pero de todas formas, no lo veo necesario, ya que al entrar a ellos ya se advierte de que tienen contenido para adultos.

      Eliminar
    2. Gracias por contestar, y si ya se que avisa antes, pero el problema es que tenemos varios tipos de imagenes y no todas son de mi gusto por eso me gustaria censuraralas.

      El blog es este: http://ecchi-anime-renders.blogspot.com.es/?zx=91d207a39038d57 y lo que me gustaria es aplicar este efecto en el indice donde estan las imagenes de los gatos que dice "+18"

      Eliminar
    3. ¿Qué código usas para que en portada se cambie la imagen por la del gato? ¿Un JavaScript?
      Pégamelo aquí si no es muy largo, pasándolo primero a texto plano (tienes una herramienta en los enlaces de la izquierda si te hace falta)

      Eliminar
    4. No el gato no utiliza java,,,es una imagen sola, la posteo con tamaño 0 px, asi no sale en la entrada pero si en la portada.

      Osea la estrucutura de la entrada es:
      Imagen de gato

      RESTO DE ENTRADA

      y al utilizar el efecto de tu entrada en la imagen del gato no funciona, si quito el "more" si funciona pero sale toda la entrada D: ese es el problema

      Eliminar
    5. Ah, OK. Es que con ese sistema que utilizas no vas a poder usar este.
      El problema principal para solapar dos imágenes es que necesitas precisamente DOS imágenes y el sistema de sumarios que tienes sólo te captura UNA para la portada.
      Tendrías que hacer sumarios sin JavaScript. Con eso creo que si podrías añadir a todas las entradas resumidas la imagen del gato

      Eliminar
    6. Ah con razon solo se veia una...y bueno ya lo arregle ^^

      Ahora publico la entrada sin el "more" y utilizo la condicional:
      b:if cond='data:blog.pageType == "item"

      Luego al rseto de la entrada qe quiero qe no salga en el indice le pongo el mismo div, y a ese div le aplico la condicional...uff me costo encontrar la manera pero lo logre.

      Muchas gracias por todo

      Eliminar
    7. Pues de nada... Yo sólo te eliminé lo que no podía ser y tú lo hiciste :)

      Eliminar
  32. Hola, gracias por el post lo primero.
    Estoy desarrollando una barra de puntuación para hoteles, se trate de 5 estrellas, pero quiero que si se pasa el ratón por la primera estrella se cambie la primera estrella , si pasa a la segunda, que se cambie la segunda, y asi hasta las 5 estrellas.
    Creo recordar que se podía hacer el cambio mediante los pixeles de la imagen, ¿me podrías ayudar? Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Mira, aquí tienes una de las muchas maneras que hay para hacer eso:
      http://codepen.io/rogie/pen/jgrIu

      Eliminar
  33. Hola, está muy bueno, pero me aparecen las dos imagenes, una al costado de la otra... Y no quiero utilizar sólo con html, porque no funciona bien, cuando entras por primera vez en el blog (PRIMERA VEZ AL DÍA) no cambia, hay que pasar dos o tres veces el mouse sobre la imagen, y ahí si anda... Pero queda re feo eso... Bueno, cualquiera de las dos cosas si puedes solucionarlas te agradeceré! Saludos!

    ResponderEliminar
  34. ¿Qué cosas nick? No entiendo lo que me quieres decir. Si lo pones en una página que lo vea incluso será más fácil que con sólo una explicación escrita.

    ResponderEliminar
  35. Hola, queria ayuda en un problema. He conseguido poner las imágenes en horizontal pero el efecto hover solo se produce en la primera de las imágenes... dejo el link para ver si me podeis ayudar: http://lamanadabeananimal.blogspot.com.es/p/shop.html
    gracias :)

    ResponderEliminar
    Respuestas
    1. Hola Isaac. A este selector añádele las dos últimas líneas que ves a continuacion:
      .miniatura {
      z-index: 1001;
      text-decoration: none;
      display: inline-block;*display: inline;zoom:1;
      position: relative;
      }

      Eliminar
  36. solucionado! muchas gracias! :)

    ResponderEliminar
  37. hola tendras una donde la segunda imagen se muestre arriba de la imagen miniatura, por favor, te lo agradeseria

    ResponderEliminar
    Respuestas
    1. Hola Roci Min. Sería como el primer caso que explico aquí mismo, sólo que cambiando esta parte:

      .miniatura span {
      position: absolute;
      text-decoration: none;
      visibility: hidden;
      border: 0px;
      bottom: 100%;
      left: 0px;
      }

      Como ves, en lugar de un top: 0; he puesto un bottom: 100%;
      Simplemente estamos poniendo en otra posición la segunda imagen cuando aparece.

      Eliminar
  38. Este tema dónde lo puedo conseguir?

    ResponderEliminar
  39. Excelente, muchas gracias!!!

    ResponderEliminar