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. Send Email with Nodemailer (490)
  2. Area and Perimeter Calculator for 2D shapes (6633)
  3. Read Excel file data in PHP - PhpExcelReader (56138)
  4. SHA256 Encrypt hash in JavaScript (5686)
  5. AJAX with POST and PHP (11881)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (446)
  2. Register and show online users and visitors (399)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (386)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (302)
  5. Insert, Select and Update NULL value in MySQL (296)