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
Click on the tag that creates an ordered list
<ul> <tr> <ol>
<ol>
  <li>List-1</li>
  <li>List-2</li>
</ol>
Which selector represents the ID of an element in CSS
.name #name name
#id {
  color: #0110fb;
}
What statement creates an object in JavaScript?
{} [] new Date()
var obj = {"site": "CoursesWeb.net", "pr": 5};
alert(obj.site);
Indicate the instruction used to evaluate if a condiition is True or False
else if() switch()
$var = 8;
if($var == 8) echo $var;
CSS3 opacity

Last accessed pages

  1. Zuma Games (15357)
  2. Qwop (9103)
  3. Zuma Deluxe (20391)
  4. Selection Tools (3474)
  5. Volume and Surface Area Calculator for 3D objects (5558)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (49682)
  2. Read Excel file data in PHP - PhpExcelReader (38072)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (37003)
  4. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (30742)
  5. Ajax-PHP Chat Script (27567)