Transparencia de imágenes con CSS

Crear o añadir transparencia a las imágenes con CSS es muy simple.

A partir de CSS3 disponemos de una propiedad «opacity» que podemos utilizar para aclarecer y dar el efecto de transparencia a las imágenes de un sitio Web.

Veamos un ejemplo de lo que estamos hablando:

Imagen en estado normal:

La misma imagen con transparencia:

Este efecto lo conseguimos de la siguiente forma:

img {
 opacity:0.4;
 filter:alpha(opacity=40); /* For IE8 and earlier */
}

Ejemplo 1: Podríamos hacer que con el efecto hover mostremos transparencia de la imagen o no de la siguiente forma:

img {
 opacity:0.4;
 filter:alpha(opacity=40); /* For IE8 and earlier */
}

img:hover {
 opacity:1.0;
 filter:alpha(opacity=100); /* For IE8 and earlier */
}

En el caso anterior, hemos añadido lo que debe suceder cuando un usuario se sitúa sobre una de las imágenes. En este caso queremos que la imagen no sea transparente cuando el usuario pasa sobre ella.

El código CSS para esto es: la opacidad = 1.

IE8 y versiones anteriores: filter: alpha (opacity = 100).

Cuando el puntero del ratón se aleja de la imagen, la imagen será transparente de nuevo.

Ejemplo 2: Texto dentro de un contenedor con transparencia.

Ver ejemplos en funcionamiento