Efecto transparente para imágenes | Oloblogger Para conseguir un efecto de transparencia como el que podeis ver en la imagen de abajo a la derecha,...

20 de octubre de 2007

Efecto transparente para imágenes

Para conseguir un efecto de transparencia como el que podeis ver en la imagen de abajo a la derecha, hay que localizar el apartado "post img" y añadir este código:

.post img {
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Firefox, Opera, ... */
opacity: 0.5; /* CSS 3*/
}

Imagen normal Imagen con efecto transparente


Como esta instrucción no está normalizada, hay que poner las tres que se indican para que sea visible en los navegadores más usuales. Al añadirlo directamente a la hoja de estilo (CSS), el efecto se aplicará a todas las imágenes que figuren en las entradas de vuestro blog. Si sólo quereis aplicarlo a una de ellas, habrá que ponerlo directamente en la ventana de creación/edición de entradas. De esta manera, una imagen que normalmente sería:


<img style="DISPLAY: block;MARGIN: 0 0 0 0; CURSOR: hand; TEXT-ALIGN: center" alt="" src="http://DIRECCIONDELAIMAGEN" border="0" />

...habría que añadirle lo también marcado en negro para que "transparentara"...

<img style="DISPLAY: block; FILTER: glow(color=black)progid filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* Firefox, Opera, ... */ opacity: 0.5; /* CSS 3*/ MARGIN: 0 0 0 0; CURSOR: hand; TEXT-ALIGN: center" alt="" src="http://DIRECCIONDELAIMAGEN" border="0" />

¿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

10 comentarios :

  1. hola ps mi nombre es roberto y quisiera saber como le hago para poner una imagen y al pasar el puntero por ella aparesca ya sea en la parte de abajo a en cualquier lugar de la misma pagina usando onmouseover!
    mi correo es engell1002000@hotmail.com

    ResponderEliminar
  2. No es exactamente lo que pides, pero creo que también te puede valer.

    Enlace
    En lugar de onmouseover, se propone una solución con click.

    Saludos

    ResponderEliminar
  3. ¿El equivalente de .post img en la plantilla Notepad chaos cuál es?, es que no lo encuentro :)

    Grácias

    ResponderEliminar
  4. #content .col01 img
    Lo tienes que crear.

    ResponderEliminar
  5. Esta lindo el blog..Mucha creatividad..

    ResponderEliminar
  6. No me funciona, capaz que no comprenda bien

    ResponderEliminar
  7. Dime si quieres que TODAS las imágenes tengan transparencia o que sólo lo tengan alguna/s en concreto. Luego de ponerlo, me pasas la dirección del blog y me dices en qué imagen en concreto lo has usado.

    ResponderEliminar
  8. ¿y como haces para que el pasar el raton encima de la foto vuelva a su color original?
    GRACIAS (:

    ResponderEliminar
  9. Paatetico:

    .post img {
    filter:alpha(opacity=50); /* IE */
    -moz-opacity:0.5; /* Firefox, Opera, ... */
    opacity: 0.5; /* CSS 3*/
    }
    .post img:hover {
    filter:alpha(opacity=1000); /* IE */
    -moz-opacity:1.0; /* Firefox, Opera, ... */
    opacity: 1.0; /* CSS 3*/
    }

    De todas formas, creo que es más conveniente aplicarlo individualmente a las imágenes que interese y no a todas que es lo que aquí se explica. Ver: Rollover (último apartado)

    ResponderEliminar
  10. Hola oloman, me surge una inquietud. en la portada de mi plantilla normalmente las imagenes salen nitidas, w.kangutingo.com .- pero a raiz de unas trastadas y jugarretas que le hice al Html para mejorar la carga lo único que quedó sirviendo mal fué las imagenes de la HOME salen borrosas, he probado trastear con opacity o z-indez pero nada que logro poner nitidas las imagenes, ¿me puedes dar un consejo porfavor? Te estaré profundamente agradecido más de lo que ya estoy. ;) estaré atento a cualquier cosa, sé que todo lleva su tiempo, seré pasciente. Gracias y un saludo.

    ResponderEliminar