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 is used in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
CSS3 opacity

Last accessed pages

  1. Create simple Website with PHP (13259)
  2. Voting Poll System script PHP-AJAX (5171)
  3. Rectangle, Oval, Polygon - Star (1482)
  4. JavaScript code and PHP (14416)
  5. PHP Simple HTML DOM Parser (5823)

Popular pages this month

  1. Qwop (4094)
  2. Bubbles3 (3536)
  3. Butterfly Kyodai (2503)
  4. Zuma Deluxe (2305)
  5. Backgammon (1198)