freeCodeCamp/guide/english/css/image-opacity-and-transparency/index.md

title
Image Opacity and Transparency

Image Opacity and Transparency

The opacity property allows you to make an image transparent by lowering how opaque it is.

Opacity takes a value between 0.0 and 1.0.

1.0 is the default value for any image. It is fully opaque.

Example

img {
    opacity: 0.3;
 }

Include filter: alpha(opacity=x) for IE8 and earlier. The x takes a value from 0-100.

img {
   opacity: 0.3;
   filter: alpha(opacity=30);
}

Here's an example of an image set to the parameters in the example above.

You can pair opacity with :hover to create a dynamic mouse-over effect.

Example:

img {
    opacity: 0.3;
    filter: alpha(opacity=30);
}
img:hover {
   opacity: 1.0;
   filter: alpha(opacity=100);
}

A codepen example to show a transparent image turning opaque on hover

You can create the opposite effect with less code since the image is 1.0 opacity by default

Example:

img:hover {
   opacity: 0.3;
   filter: alpha(opacity=30);
}

A codepen example to show transparency on mouse-over

More Information:

-w3schools.com CSS Opacity/Transparency

-MDN web docsOpacity