The opacity property sets the opacity level for an element, opacity allows to change the transparency of an element.
IE8 and earlier supports an alternative variant, the filter property.

- Syntax:
filter: alpha(opacity=X);     /* for IE */
opacity: X;
- X - represents a value between 0 (completely transparent) and 1.0 (no transparency).

1) Example, a <div> with a css transparency of 40%:
<style type="text/css"><!--
#dv {
 background-color:blue;
 width:200px;
 height:100px;
 filter:alpha(opacity=40);     /* for IE */
 opacity:0.4;
}
--></style>

<div id="dv">Some content ...</div>
Demo:
Some content ...

2) Example, sets opacity of 50% on a image:
<style type="text/css"><!--
#im {
 filter:alpha(opacity=50);     /* for IE */
 opacity:0.5;
}
--></style>

<img src="html_course.jpg" alt="HTML and CSS Course" width="155" height="160" id="im" />
Demo:
HTML and CSS Course

3) Example, effect image transparency 50%, to 100% on the hover state:
<style type="text/css"><!--
#im2 {
 filter:alpha(opacity=50);     /* for IE */
 opacity:0.5;
}
#im2:hover {
 filter:alpha(opacity=100);     /* for IE */
 opacity:1;
}
--></style>

<img src="html_course.jpg" alt="HTML and CSS Course" width="155" height="160" id="im2" />
Demo (place the mouse over the image below):
HTML and CSS Course

4) DIV content that is covered with a transparent box on mouseover (the transparent box [a <div>] must be empty and set with   position:absolute;):
<style type="text/css"><!--
#trans {
 display:none;
 position:absolute;
 top:2%;
 left:2%;
 width:96%;
 height:95%;
 background-color:#07fe08;
 filter:alpha(opacity=50);     /* for IE */
 opacity:0.5;
}
#cnt {
 position:relative;
 background:#e7e8fe;
 width:300px;
 height:200px;
 border:1px solid blue;
 padding:20px;
}
#cnt:hover #trans { display:block; }
--></style>

<div id="cnt">
 <div id="trans"></div>
 Place the mouse over this box to see the opacity effect.
<img src="css3.jpg" alt="CSS3 opacity" width="160" height="98" />
</div>
Demo:
Place the mouse over this box to see the opacity effect. CSS3 opacity

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
CSS3 opacity

Last accessed pages

  1. Get Attribute (ID, Class, Name, Title, Src) with jQuery (47909)
  2. Blox (225)
  3. Logic Perspicacity Games (7762)
  4. Node.js Move and Copy file (1981)
  5. Insert, Select and Update NULL value in MySQL (23071)

Popular pages this month

  1. Qwop (4886)
  2. Get Attribute (ID, Class, Name, Title, Src) with jQuery (2984)
  3. Get the value of the selected /checked checkboxes in a form (2320)
  4. Drag Racer V3 (1932)
  5. Flash Games - Free online Games (1569)