Efecto de opacidad en una imagen al pasar el cursor

3 de octubre de 2009 55 comentarios ,
Ya vimos cómo tener este efecto de opacidad en las imágenes al pasar el cursor sobre ella; en esa ocasión lo hicimos usando un poco de CSS en la plantilla y asignando una clase en la imagen.
Esta vez haremos lo mismo pero sin editar la plantilla, además con dos variantes, una es que una imagen con opacidad tome su color normal al pasar el cursor sobre ella, y otra que una imagen con color normal se muestre opaca al pasar el mouse.

Imagen con opacidad y color normal al pasar el mouse



<img style="opacity: 0.2; filter:alpha(opacity=20);" src="URL de la imagen" onmouseover="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseout="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/>


Imagen normal y efecto de opacidad al pasar el mouse.



<img src="URL de la imagen" onmouseout="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseover="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/>

Sólo pega el código dentro de una entrada o un elemento HTML/Javascript y cambia lo que está en rojo por la URL de la imagen.


55 comentarios en:

" Efecto de opacidad en una imagen al pasar el cursor "

  1. Esta Muy bueno el ejemplo, Gracias Potro.

    ResponderEliminar
  2. Hola Pepe,

    Igual a mí me gustaron esas imágenes =)
    Saludos!

    ResponderEliminar
  3. y tengo una pregunta, me puedes dar el código o decirme alguna entrada que diga como hacer para poner las estadisticas del blog, como en el gadget tuyo que dice 'LA CIUDAD TIENE' y despues dice los dias, las entradas y los comentarios.

    ResponderEliminar
  4. hola muchas gracias por el truco, y ya que estoy comentando, te pregunto como hacen esos blogs para ñadir íconos delante de los titulos de la sidebar, pero yo no quiero una icono solo, quiero una para cada entrada en especifico, por ejemplo, a la de últimos comentarios, añadirle un msn, y todo así, como puedo hacerlo?

    ResponderEliminar
  5. Ummmm, no sé si te he entendido bien, hay una forma de poner un icono en los títulos de la sidebar, sino es eso dime un blog de ejemplo para verlo.

    Saludos.

    ResponderEliminar
  6. pa, me mataste, lo he visto pero no me encuentro donde, sino ya me hubiera fijado para orientarme un poco, pero mira, te explico, yo eh visto en algunos blogs que ponen por ejemplo, en el gadget de últimos comentarios ponen al lado del titulo un pequeño icono de un globo de dialogo, al lado de otro gadget, un icono que lo represente. Cómo se hace eso, porque yo se la manera de poner en sidebar h3 { background-image: url ('IMAGEN') } pero ese icono se pone en todos los gadgets, me entiendes??

    ResponderEliminar
  7. Te puse el enlace entre el texto del comentario anterior, quizá no se ve por el color, te lo paso de nuevo:
    http://ciudadblogger.com/2009/06/poner-iconos-en-etiquetas-y-otros.html

    En esa entrada explico cómo poner un ícono distinto para cada gadget.

    Saludos.

    ResponderEliminar
  8. Perdón, el enlace anterior es para poner un ícono a los elementos del gadget, en este es para poner un ícono o una imagen de fondo en el título del gadget:
    http://ciudadblogger.com/2009/08/poner-imagen-en-los-titulos-de-los.html

    ResponderEliminar
  9. ¡Hola, Potro! Espero que te la estés pasando súper, amigo.

    Fíjate que acabo de ver esta herramienta que acabas de poner y me gustó mucho. ¡Está excelente! Entonces pensaba preguntarte: "¿se puede hacer lo mismo para usar una imagen como enlace para otro sitio (Mi Perfil, por ejemplo) y si se puede hacer que se abra en una ventana nueva?". Entonces me dije a mí mismo: "¿y por qué no intentas hacerlo tú solo?". ¿Y qué crees? ¡Lo logré! Lo único que tuve que hacer fue manipular el código HTML y listo. ¿No te parece emocionante? Bueno, estoy seguro que muchos aquí pueden hacer eso y mucho más, pero para mí significa "dar un paso muy importante a un mundo mayor" como dice Obi-Wan Kenobi.

    Ya puse esta herramienta en mi Blog y se ve excelente, pues con el fondo azul se ve como un fantasma, y aparece en "alta definición" al pasar el puntero del mouse.

    No lo hubiera logrado sin tu ayuda, amigo. Sé feliz. Un abrazo de hermanos. ¡Saludos a todos! Chao.

    ResponderEliminar
  10. bueno, lo provare y gracias por tomarte tu tiempo en estas pabadas, en serio!!!

    ResponderEliminar
  11. Con el código que apliqué también tengo control sobre las dimensiones de la imagen.

    ResponderEliminar
  12. Hola Eduardo,

    De verdad me da mucho gusto saber que vas avanzando en esto de los códigos. Ya irás descubriendo que puedes hacer infinidad de cosas moviendo o agregando sólo unos caracteres.

    Ya vi tu perfil en tu blog y me encantó cómo se ve la opacidad de esa imagen con el fondo azul de tu blog.

    Felicidades!

    ResponderEliminar
  13. ola hay forma de que no quede tan opaca la imagen? como se manipula

    ResponderEliminar
  14. Busca dentro del código las dos veces que aparece esto:
    opacity: 0.2

    Cambialo por 0.5 u otro número mayor para tener menos opacidad.

    ResponderEliminar
  15. Hola Potro, yo ya lo active, al final de cada post puse 2 imagenes para suscripciones, pero no se aplica ese efecto de opacidad. Sabes cual sea el problema? Saludos.

    ResponderEliminar
  16. Necesitaría ver cómo estás poniendo el código y así detectar dónde está el problema.

    Saludos.

    ResponderEliminar
  17. Umm, el problema es que no se puede, solo dices que en una entrada o en un elemento html, no habia visto :S

    ResponderEliminar
  18. Cuando se aplica directo en la plantilla a veces no funciona, pero no siempre es el caso.

    ResponderEliminar
  19. ¿Puede suceder esto en una entrada escrita?. Quiero decir que cuando se pase el mouse, la enrtada publicada se ponga más opaca que las demás, como para poder visualizar que es "ESA LA ENTRADA QUE SE LEE" sin entrar en ella.

    Agradezco tu respuesta Potro, muchas gracias.

    ResponderEliminar
  20. Con este truco no, pero puedes hacerlo con este otro.
    Saludos.

    ResponderEliminar
  21. hey amigo gracias por el truco, peo me gustaría hacerte una pregunta, como modificas el % de opacidad de la imagen? es que he modificado los valores y no sucede nada...
    te lo agradeceria

    ResponderEliminar
  22. Se cambia donde dice opacity: 0.2; filter:alpha(opacity=20) y this.style.opacity=0.2;this.filters.alpha.opacity='20';

    Si lo quieres menos opaco entonces cambia esos valores por otros más altos, por ejemplo, si lo quieres a la mitad de opacidad entonces cambia 0.2 por 0.5 y cambia el 20 por 50

    ResponderEliminar
  23. Potro, me encanta tu blog. Está genial!
    Te quería preguntar si se puede lograr este efecto al mismo tiempo en TODAS las entradas. Gracias por los trucos y la buena onda! :D

    ResponderEliminar
  24. Se le puede poner la opacidad a todas las imágenes de manera automática pero no tendrían el efecto al pasar el cursor, así que es necesario hacerlo en todas las entradas donde se desee mostrar.

    ¡Saludos y gracias por tu comentario!

    ResponderEliminar
  25. dioooooooooooooos no me anda ayudame por diooos!

    ResponderEliminar
  26. Con gusto Berenice, pero necesito saber más detalles para poder hacerlo, como en qué blog lo has puesto, y si te aparece algún error, o sólo más detalles.

    ResponderEliminar
  27. Hola Potro esta muy bien, este truquillo pero quisiera ponerlo en general para todas la imagenes de mi blog, quisiera saber si esto se puede hacer..!!GRACIAS..

    ResponderEliminar
    Respuestas
    1. Hola Mauricio,
      Este no porque usa Javascript directo en la imagen, pero al inicio de la entrada hay un enlace a un método con CSS, ese sí puedes aplicarlo a todas las imágenes de tu blog, sólo cambia a.opacidad img por img
      Y a.opacidad:hover por img:hover

      Eliminar
  28. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  29. Respuestas
    1. Mira esta entrada para que veas cómo obtener la URL de una imagen:
      http://ciudadblogger.com/2011/06/subir-imagenes-y-obtener-la-url-de-la.html

      Eliminar
  30. como hago para que la imagen con el efecto de opacidad tenga también un link que redirija a otra pagina?

    ResponderEliminar
    Respuestas
    1. Encierra el código de la imagen entre <a href="URL del enlace"> y </a>

      Eliminar
    2. :D genial gracias! una cosita mas (si es que se puede..) como puedo configurar la opacidad? :B

      Eliminar
    3. ah :) muchas gracias! a la próxima leo mejor :p

      Eliminar
  31. oye una pregunta como hago para que todas mis imagenes esten opacadas?

    ResponderEliminar
    Respuestas
    1. Pega antes de ]]></b:skin> esto:

      .post img {
      opacity: 0.2;
      filter:alpha(opacity=20);
      }
      .post img:hover {
      opacity: 1;
      filter:alpha(opacity=100);
      }

      Eliminar
  32. ¡Buenas tardes!

    ¿Como hago para tener 4 imágenes al 100% de opacidad y cuando pase el mouse over por una de ellas las restantes pasen a 50% de la opacidad? Es un estilo de menú que estoy creando

    Gracias!

    ResponderEliminar
    Respuestas
    1. Buenas tardes mauricio, es más o menos de la misma forma pero aplicand los estilos CSS en la plantilla, como esto:
      http://ciudadblogger.com/2009/08/efecto-de-opacidad-en-las-imagenes.html

      Eliminar
  33. Hola como estas? , este blog es excelente! espero que puedas responder esta duda que tengo. ¿Como puedo hacer el mismo efecto pero añadiendole un texto informativo y con una velocidad de opacidad mas lenta?. Aqui te paso un link como ejemplo: http://www.fosterandpartners.com/projects/

    ResponderEliminar
    Respuestas
    1. No tengo una entrada sobre ello Cesar, pero en cuanto retome de lleno el blog procuraré publicarlo de inmediato.
      Saludos.

      Eliminar
  34. Buen día, Potro
    ¿Es posible hacer una transición suave de la opacidad?¿Sabes cómo?
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Elek Tron. Sigue el mismo procedimiento del comentario #34.1, pero debajo de .post img { y .post img:mover { pon esto:

      -webkit-transition: all .2s linear;
      -moz-transition: all .2s linear;
      -o-transition: all .2s linear;
      -ms-transition: all .2s linear;
      transition: all .2s linear;

      Eliminar
    2. Gracias, Potro.
      Sólo quiero que se afecte la imagen en un gadget determinado y no todas las imagenes del blog. ¿Es posible?

      Eliminar
    3. Sólo cambia esto .post img { y .post img:hover { por:
      .opacidadimg { y .opacidadimg:hover {

      Luego dentro del código de la imagen agrega:
      class='opacidadimg'

      Eliminar
  35. Hola

    Muchas gracias!
    Es posible poner que ademas que cuando se vuelva opaca la imagen aparezca un texto sobre ella?
    Gracias.

    ResponderEliminar
    Respuestas
    1. Con este código no, pero quizá puedas combinarlo junto con este:
      http://www.ciudadblogger.com/2014/04/pie-de-foto-con-fondo-y-sobre-la-imagen.html

      Eliminar
  36. Este comentario ha sido eliminado por el autor.

    ResponderEliminar

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.

 
Ir Arriba Ir Abajo
I Ciudad Blogger