Efecto de opacidad en las imagenes

17 de agosto de 2009 77 comentarios ,
Este efecto de opacidad queda muy bien tanto en los posts del blog como en alguna imagen en la sidebar, se trata de crearle opacidad a una imagen pero al pasar el cursor sobre ella recupera el color original. Esta es una forma distinta y original de mostrar nuestras imágenes, o incluso de crear un menú.



Para lograr este efecto entra a Plantilla | Edición de HTML y antes de ]]></b:skin> pega lo siguiente:
/* OPACIDAD EN IMAGENES
----------------------- */
a.opacidad img {
  filter:alpha(opacity=50);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: 0.5;
  }

a.opacidad:hover img {
  filter:alpha(opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  opacity: 1.0;
  }

Ahora cuando quieras usar este efecto en una imagen dentro del post o en un elemento HTML/Javascript, usa este código:
<a class="opacidad" href="URL del enlace" src="URL de la imagen"><img src="URL de la imagen"></a>

Sólo agrega la URL del enlace si es que lo tiene, sino elimina esta parte: href="URL del enlace"
Como ves, la URL de la imagen va dos veces, esto es porque una es para mostrar la imagen con la opacidad y la otra es para mostrar la imagen con el color normal.


77 comentarios en:

" Efecto de opacidad en las imagenes "

  1. buen truco
    pero ¿que baners vas a retirar el 5 de septiembre?
    ¿todos o solo algunos?
    ¿el mio esta entre los que vas a retirar?

    ResponderEliminar
  2. Hola el venado,

    Se van a retirar todos los banners, pero en un par de meses se podrán publicar nuevamente.

    Saludos.

    ResponderEliminar
  3. Muy buen efecto, se agradece.

    Subido a http://www.enlazala.com

    Vamos a votarla para que sea promocionada a la portada del sitio!

    ResponderEliminar
  4. Hola Grangonzo,

    Muchas gracias por la promo.
    Saludos.

    ResponderEliminar
  5. hola!!!!! te queria preguntar como hacer los banners cambiantes como los que tenes arriba con efecto de desbanesido...

    ResponderEliminar
  6. Buen truco. Da un buen efecto y "vida" al blog.

    ¿Porque retiras los banners?

    Saludos.
    Jpz.-

    ResponderEliminar
  7. Hola Ivan,

    Para saber cómo crear los banners rotatorios visita este post:
    http://ciudadblogger.com/2009/04/banner-cambiante.html

    Saludos.

    ResponderEliminar
  8. Hola Jpz,

    A mí me gusta mucho ese efecto, sobre todo me gusta cómo se ve en los menús.

    Los banners los quitaré momentáneamente, Google me sancionó el PageRank por subir varios links seguido así que tendré que moderarme un poco con el tema de los banners.

    Saludos.

    ResponderEliminar
  9. hola, disculpa, no sabes si feedburner funciona correctamente? disculpa la molestia, saludos

    ResponderEliminar
  10. Hola Ezequiel,

    Está trabajando perfecto, al menos los feeds a los que estoy inscrito están funcionando muy bien.

    Saludos.

    ResponderEliminar
  11. muchas gracias por responder tan rapido, la verda exelente tu sitio, lo estoy revisando todo ahora que tengo un poco mas de tiempo libre por la facultad jaja

    la ultima pregunta y no te molesto mas, cuanto tarda en aparecer el nuevo posteo en la bandeja de entrada de la persona que se suscribio?

    deesde ya muchas gracias

    ResponderEliminar
  12. Hola Ezequiel,

    No es ninguna molestia, para estamos =)
    El tiempo que tarda en distribuirse el contenido de tu feed depende de la configuración que tengas.
    Entra a tu cuenta de Feedburner y haz click en la ficha Publicize, luego click en Suscripciones por Email y luego en Delivery Options.
    Ahí selecciona el horario en el que deberá ser enviado el contenido, si lo programas (por ejemplo) que se entregue de 9 a 11 entonces dentro de ese horario se enviará por correo el contenido de tu blog a las personas que estén suscritas.

    Por otro lado también es bueno que uses un servicio de ping para que avise a todos los servicios de feed (incluyendo Feedburner) que tienes contenido nuevo, eso puedes hacerlo en TotalPing.com de este modo agilizarás el proceso de tu feed.

    Saludos.

    ResponderEliminar
  13. muchisimas muchisimas gracias, ya hice todo, incluyendo el ping, en algunos no se pudo conectar con el servidor, pero en feefburner que es el que tengo si, bueno, mañana te confirmo si me envio el posteo a los mails, el tema es que me aprecia raro xq hice 2 suscripciones de mails mios para probar, llegan los mensajes de activacion, los active, pero en feedburner me aparecia como que no habia suscripciones, vamos a ver que pasa mañana:)

    te agradezco mucho, saludoss

    ResponderEliminar
  14. Ya verás que sí llega.
    Que no conecte con el servidor en algunos servicios es común, pero como dices lo importante es que conecte con Feedburner.

    Saludos.

    ResponderEliminar
  15. Hola Potro:
    Necesito que me ayudes (nuevamente).
    Deseo poner "hover" en algunos botones de mi blog... Como lo hago?

    Son para el botón "Buscar" (en el buscador) y "Enviar" (suscripción e-mail).

    Saludos.
    Jpz.-

    ResponderEliminar
  16. Hola Jpz,

    Usa esta propiedad:

    input:hover {
    background:#ccc;
    }

    Ahí cambiará el color del botón por uno gris al pasar el mouse, tú puedes agregarle el efecto que quieras.

    Saludos.

    ResponderEliminar
  17. OK Potro.
    Gracias y saludos.
    Jpz.-

    ResponderEliminar
  18. Potro:
    No me resultó.
    Quizá no lo inserté donde corresponde.
    Me ayudas?
    Saludos.
    Jpz.-

    ResponderEliminar
  19. No veo que hayas añadido el código, debes pegarlo arriba de:
    a:hover {

    Saludos.

    ResponderEliminar
  20. Hola Potro.
    El código ya lo eliminé.
    No se que #@$&% pasa, creo que estoy pegándolo en cualquier parte, menos donde corresponde. Dame una ayuda "a prueba de..."

    Saludos.
    Jpz.-

    ResponderEliminar
  21. Hola Jpz,

    ¿Qué efecto le quieres dar al pasar el mouse?

    ResponderEliminar
  22. Potro:
    Al pasar el mouse que cambie sólamente el background del botón.
    Eso.
    Donde y cómo agrego el código?

    Saludos.
    Jpz.-

    ResponderEliminar
  23. Hola Jpz,

    Si estás batallando con el CSS entonces hazlo con Javascript. En el caso del botón de búsqueda tienes este código:

    <input id='searchsubmit' type='submit' value='Buscar'/>

    Ese cámbialo por este:

    <input id='searchsubmit' onmouseover="this.style.background = '#FFFFFF';" onmouseout="this.style.background= '#70a600'" type='submit' value='Buscar'/>

    Sólo cambia el código #FFFFFF por el código del color que tendrá al pasar el mouse.

    Para el otro botón cambia esto:

    <input id="rssboxsubmit" value="Enviar" type="submit"/>

    Por esto:

    <input id="rssboxsubmit" onmouseover="this.style.background = '#FFFFFF';" onmouseout="this.style.background= '#70a600'" value="Enviar" type="submit"/>

    De igual forma cambia el color que te mencioné antes.

    Saludos.

    ResponderEliminar
  24. Hola Potro:
    Excelente dato.
    Pero sólo funcionó para el "rssboxsubmit".
    En el "buscar", al modificarlo, no se muestra el efecto.
    ¿Que será?... Dále una mirada.
    Saludos y gracias.
    Jpz.-

    ResponderEliminar
  25. Hola Jpz,

    No veo que le hayas agregado el código al otro =S

    ResponderEliminar
  26. Cuando no funciona lo elimino y lo dejo como estaba (originalmente).

    En este momento lo inserté para que le des una "mirada".

    Que hago?
    Saludos.
    Jpz.-

    ResponderEliminar
  27. En el de 'Buscar' tienes este código:

    onmouseout='this.style.background= '#70a600'' onmouseover='this.style.background = '#aeb916';'

    Si te fijas al inicio tienes comillas simples cuando deben ser comillas dobles.
    Debes ponerlo tal cual como este:

    onmouseover="this.style.background = '#aeb916';" onmouseout="this.style.background= '#70a600'"

    Saludos.

    ResponderEliminar
  28. Lo hago, pero al guardar los cambios y volver a verlos, cambia a 1 comilla.
    No entiendo.
    ???
    Saludos.
    Jpz.-

    ResponderEliminar
  29. Intenta con este:

    onmouseover=&quot;this.style.background = &#039;#aeb916&#039;;&quot; onmouseout=&quot;this.style.background= &#039;#70a600&#039;&quot;

    ResponderEliminar
  30. funciono perfecto... muchas gracias..

    http://www.bajaloaca.wordpress.com

    ResponderEliminar
  31. Me alegro que te haya servido.
    Saludos =)

    ResponderEliminar
  32. Bueno y si quiero que el enlace se abra en una nueva venta donde agrego el Target blank

    ResponderEliminar
  33. En cualquier parte dentro del enlace, por ejemplo antes de class="opacidad"

    ResponderEliminar
  34. Potro ese código donde agregamos dentro del post o en un elemento HTML/Javascript, solo permite entrar a la misma pagina sin salir, pero habra un codigo que al hacer clic salte a una pagina nueva saliendo de la pagina? gracias!

    ResponderEliminar
  35. Usando el atributo target='_blank' como siempre se hace, sólo agrega después de la URL del enlace esto:
    target='_blank'

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

    ResponderEliminar
  37. Si quieres que se aplique a todas las imágenes de las entradas entonces usa este código:

    .post img:hover {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    -khtml-opacity: 0.5;
    }

    .post img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    -khtml-opacity: 1.0;
    }

    La opacidad se verá al pasar el cursor sobre las imágenes de las entradas.

    ResponderEliminar
    Respuestas
    1. Vengo por aquí de nuevo y con el mismo tema. Te comento: he aplicado este código y si pongo .widget img. en vez de .post img. se aplica el efecto en todas las imágenes del blog y también en la cabecera, quiero evitar esto si hay alguna forma. Tambien te digo que he creado una pagina estática como portada y el widget de las ultimas entradas lo tengo añadido debajo de la cabecera y hace la función de portada con las imágenes de las ultimas entradas. Es para que lo sepas, si quieres entra en el blog lo veras. Haber como lo puedo solucionar. Por si no ves la otra pregunta, mi pregunta era como puedo añadir este efecto solo en un gadget concreto (el mio HTML8).Gracias !!!!

      Eliminar
    2. Hola, ¿específicamente dónde lo quieres poner y dónde no? si es sólo al HTML8 entonces es como te comentaba hace un momento en el otro comentario que dejaste. Saludos.

      Eliminar
  38. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  39. Es igual un efecto de desvanecimiento, con el código que te he dado será parecido sólo que sin la imagen del "play" pues no funciona en todos los casos.

    ResponderEliminar
  40. Hola si por fabor yo te doy mi contraseña y todo y me lo haces vos. ? porque la verdad no entiendo. Si leisto esto entra a mi blogger y firmame.
    www.verybeautifulwoman.blogspot.com

    ResponderEliminar
  41. Lo siento Berenice, puedo orientarte si en algún paso te quedas atorada pero no puedo hacerlo por nadie.
    Saludos.

    ResponderEliminar
  42. Queria saber como se hace para cambiar la barra de desplazamiento en el blogger, porque yo vi unas bonitas en las que se le agregan imagenes y esas cosas. Seria de mucha ayuda :)

    ResponderEliminar
  43. Tan personalizadas como con imágenes no sé si se pueda, pero en Vagabundia puedes ver una manera de personalizarlas con jQuery:
    http://vagabundia.blogspot.com/2011/03/cambiar-las-barras-de-desplazamiento.html

    ResponderEliminar
  44. Holaa tengoo una duda yoo lo puse el codigo justo como explicas pero no se porque noo me saleee alguna idea? ayudamee sii porfis :D tengo la plantilla personalizada pero en base LA tercera del grupo FANTASTICO, S.A :D

    ResponderEliminar
    Respuestas
    1. Hola Ṃια Pσяcεʟαп, ¿a cuál imagen se lo pusiste?

      Eliminar
  45. pues no se lo puse a ninguna imagen en especifico yoo pense que era a todas las imagenes de todas las entradas del blog

    ResponderEliminar
    Respuestas
    1. Nop, por eso dice la entrada que se agregue el otro código a las imágenes donde se quiera aplicar.
      Pero, si quieres que esté de forma automática en todas las imágenes de las entradas mira el comentario #38

      Eliminar
  46. hey gracias pero x'( waaa no se por que extraña razon no me funcionoo!!!
    sera por que pege ese codigo en lugar del original? alguna idea?

    ResponderEliminar
  47. Muy buenas el Potro.
    Quería hacer una pregunta acerca de un pequeño (en realidad insignificante) problema fruto de este efecto más una transición con los valores (-moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;) para que se vea mejor.
    Resulta que cuando pasa el cursor por encima de la imagen (concretamente iconos de 50x50) ésta se reduce en calidad mientras la transición se efectúa, volviendo a su ser cuando ésta ha terminado y creando una sensación visual "desagradable". Aunque, como ves, no es nada grave, quería preguntarte si podía solucionarse pues en otras imágenes de mi Blog en las que tengo puesto el mismo efecto no ocurre lo mismo.
    Muchas gracias por tu respuesta.

    ResponderEliminar
    Respuestas
    1. Hola Franciscojrg. Sucede eso porque tu imagen es pequeña, por eso pierde calidad. Es como cualquier imagen pequeña, si la agrandas se verá mal, pero eso depende del tamaño de tu imagen en sí.
      Saludos.

      Eliminar
    2. Te agradezco la respuesta, El Potro, pero no entiendo... La imagen no varía su tamaño en la ejecución del "script". Simplemente varía su opacidad con una "transición" que haga más agradable a la vista la variación... Eso no debería ser razón para la pérdida de calidad momentánea de la imagen, ¿no?

      Eliminar
    3. Tienes toda la razón Franciscojrg, he sido yo el que se ha equivocado, creí que la entrada era sobre el aumento del tamaño de la imagen al pasar el cursor.

      Te explico porqué sucede. Las transiciones usan medidas de tiempo, estas medidas pueden hacer que el efecto sea más rápido o más lento en cambiar de un estado a otro.
      Cuando el valor es lento y el cambio que tiene que hacer es muy corto entonces se da lo que mencionas. Por ejemplo, si a una imagen de 100 x 100px yo le pongo una transición para que ésta se agrande a 120px y si en el valor indico que éste cambio sea lento entonces cuando se agrande se verá como si diera "saltos", algo así como cuando a las películas les quitas cuadros. Pero si a esta misma imagen, con el mismo valor de lentitud le indico que aumente hasta 300px entonces ahí no se verán esos "saltos" porque tiene suficiente espacio para efectuarse.
      Pues lo mismo sucede con el ícono que tienes.

      Lo que puedes hacer es cambiar el valor de la transición de 0.5s a 1s aunque eso afectará de igual forma a las imágenes grandes, así que tal vez sea mejor dejarlo como está.

      A ver si no te confundí más :P

      Eliminar
    4. Tu respuesta la comprendo pero sigo sin entender qué tiene que ver con el problema que se me da. Ruego perdones la cerrazón :3
      Yo sólo deseo un cambio en la opacidad de la imagen, no en su tamaño. Por lo tanto, no hay cambio alguno en la resolución de esa determinada imagen y no debería haber una pérdida de calidad mientras se produce el efecto de transición de opacidad... Pero este sigue produciéndose y esa razón es la que no discierno.

      Eliminar
    5. Lo del tamaño era sólo para ejemplificar y comprendieras porqué suceden esas deformaciones.
      Aun sí, ¿ya has verificado en otros ordenadores? porque a veces lo que no se ve bien es por la resolución del monitor, el navegador, etc.
      ¿En cuál blog tienes el problema y cuáles son esas imágenes? Porque si tampoco tengo esos datos sólo puedo darte teorías :/

      Eliminar
    6. Discúlpame, El Potro.
      También tienes razón, yo aquí explicando el problema con la tontería de no mostrar el Blog ni nada.
      http://tinyurl.com/d8aolra
      Me refiero a las imágenes para recomendar el blog de arriba en la columna de contenidos de la izquierda. El navegador que personalmente uso es Google Chrome.

      Eliminar
    7. Veo que además de la opacidad tiene otro efecto, como si se moviera un poco, ¿qué estilos agregaste para eso? Porque he copiado tu código (el de la opacidad), copié las imágenes tal como las tienes y en lo absoluto se ve ese ligero pixeleo, cambia con la misma calidad que en su estado normal, por lo que me hace pensar que si tuvieras otro estilo para las imágenes entonces ese estilo podría ser el responsable.

      Eliminar
    8. Pues no tengo absolutamente ningún otro, ¡esa es la cosa! Y es lo que hace tan raro el pixeleo que se produce en las imágenes, así como el pequeño movimiento de las mismas pero... ¿Sabes qué? Al final lo he arreglado.
      Resulta que construyendo la web me di cuenta de que las imágenes no tenían ese problema en el efecto de la opacidad cuando éste se "ejecutaba" fuera de la página principal de inicio, lo que me llevó a pensar que era algo relacionado con ésta lo que producía esa aberración en el efecto.
      Y al final encontré la causa: un reproductor de música "añadible" de una página llamada Soundcloud que, estando fuera de la entrada de inicio, lo arregló todo.
      En resumen: cuando se añade el código de ese reproductor a la web y aparece en pantalla el efecto se "corrompe". En el momento en que no está, funciona como siempre. Así que algo "gráfico" deberá ser. Aquí puede constatarse: http://tinyurl.com/d8aolra
      Muchas gracias de todas formas y nuevamente ^^

      Eliminar
    9. Pues vaya manera de ese reproductor de afectar elementos que no debería de tocar, pero no sería el único elemento que hace eso, otros gadgets lo hacen de igual manera :/
      Lo importante es que has sabido detectar el problema y solucionarlo :)

      Eliminar
    10. Pues sí, le echaré un ojo al reproductor a partir de ahora y ya está, ya he podido arreglar la cuestión :D
      Muchas gracias por la ayuda, de igual manera ^^

      Eliminar
  48. Hola Potro, me gustaria saber si a este efecto de le puede añadir texto en el centro de la imagen, gracias

    ResponderEliminar
  49. hola Potro, me gustaria saber si a este efecto se le puede añadir texto en el centro de la imagen, con la opacidad incluida.
    gracias.

    ResponderEliminar
    Respuestas
    1. No melissa, eso ya es algo un poquito más complejo, a ver si después hago un tutorial sobre ello.

      Eliminar
    2. Otra pregunta Potro, has publicado una entrada sobre este tema.Estaba buscando una entrada sobre este tema en tu blog y no la encuentro, es para saberlo si la tienes publicada ya que a mi también me interesa este tema. Gracias.

      Eliminar
    3. Algo similar es esto que publiqué hace algunas semanas (mira el último ejemplo del post), quizá sólo tengas que hacer unos cambios para dejarlo como quieres:
      http://ciudadblogger.com/2014/04/pie-de-foto-con-fondo-y-sobre-la-imagen.html

      Eliminar
  50. Hola Potro !!!
    Como puedo añadir este efecto en el gadget "Ultimas entradas", o en cualquier tipo de gadget con imágenes. Gracias.

    ResponderEliminar
    Respuestas
    1. Hola, sólo cambia donde dice a.opacidad por el ID de tu gadget al que se lo quieras aplicar. Saludos.

      Eliminar
    2. Es lo que estoy haciendo y no hay manera, en todo caso gracias por la respuesta. Un saludo !!!

      Eliminar
  51. Hola !! Vengo solo para comentarte que lo he conseguido !!! Le he añadido al widget por delante el signo de # y lo he conseguido. Es que yo ponia .HTML8 y no había manera. Saludos !!!

    ResponderEliminar
  52. Bueno, ya ves lo que he tardado en escribirte :) Tengo otra pregunta sobre este tema. Mira, yo tengo instalado el efecto de opacidad en las imágenes en mi blog, pero de tal forma que la imagen se vuelve opaca cuando pasas con el cursor sobre la misma. Y lo tengo instalado con css para todas las imágenes de las entradas. Te quiero preguntar, ¿como hago para evitar o eliminar este efecto en alguna imagen? Ya que en ciertas imagenes quiero aplicar otro efecto. Gracias !!!

    ResponderEliminar
    Respuestas
    1. Ya empezaba a creer que no escribirías ;)
      Sólo agrega otros estilos nuevos:

      .sin-opacidad {
      opacity: 1;
      filter:alpha(opacity=100);
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      }

      Luego, en el código de tu imagen agrega la nueva clase que creaste, en este caso:
      class='sin-opacidad'

      Eso hará que esa imagen no tenga ninguna opacidad por defecto.

      Eliminar
  53. Lo tengo !!!! Disculpa las molestias, un saludo !!!

    ResponderEliminar
    Respuestas
    1. Yo lo he conseguido de otra forma. Le añado un style de opacidad de 1.0 directamente a la imagen, y no he tocado el css para nada. Y de esta forma también he conseguido eliminar el efecto de opacidad. Al ver tu comentario te pregunto, ¿que es más correcto?, está bien tal y como lo he hecho yo?
      Un saludo !!!

      Eliminar
    2. Ambas formas son válidas y correctas ;)

      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