Web Development Network  |  Sites:    Capital Tutorials    Internet Marketing Books    Arcade Games
Depiction- Webmaster Resources
Stock Image


Contributors: SSD VPS in Europe  |  SEO Las Vegas |  EsqRank |  Free SEO Report

Dental SEO Marketing  |  Best Las Vegas SEO Company  |  Currency Converter Live

Misc Links: Submit Tutorials (Earn $$) l Advertising l Privacy Policy | Site Map

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.

Woman Breathing

 
 

Affiliates

Dr Quincy Photoshop Tutorials
Tutorial Man Wallpaper Stock  More

Resources