Tutorials > CSS > Opacity
Learn how to change the opacity of an object by default or on rollover using CSS.
In CSS version 3, opacity of an image or object can be changed using just CSS. This works best in Firefox or Opera, however it still works somewhat in Internet Explorer. (Internet Explorer doesn't fully support most web standards).
Conceptually, after the element (including its children) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering.
To change the opacity of an object, add the following CSS to your stylesheet.
Code:
------------------------------------------------------------------------
<style type="text/css">
#imgopacity
{
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
-khtml-opacity: 0.7;
}
</style>
------------------------------------------------------------------------
Next add the style to the object you would like it to effect.
You can also have the opacity be in effect by default or only on hover. To have it effect the object only on hover, add :hover to the end of the style name, as shown below.
Code:
------------------------------------------------------------------------
<style type="text/css">
#imgopacity:hover
{
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
-khtml-opacity: 0.7;
}
</style>
------------------------------------------------------------------------
Here is an example with the opacity lowered to 70% by default with a change to 100% opacity on rollover.
