CSS3 opacity

The opacity property sets the opacity level for an element, opacity allows to change the transparency of an element.

- Syntax:

opacity: X;

- X - represents a value between 0 (completely transparent) and 1.0 (no transparency).

CSS opacity examples

1) Example, a <div> with a css transparency of 40%:

<style>
#dv {
 background-color:#babafe;
 width:200px;
 height:100px;
 opacity:0.4;
}
</style>

<h4>Example opacity 40%</h4>

<div id='dv'>Some content ...</div>

2) Example, sets opacity 50% to an image:

<style>
#im {
 opacity:0.5;
}
</style>

<h4>Example opacity 50% on image</h4>

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

3) Example, effect image transparency 50%, to 100% on the hover state:

<style>
#im2 {
 opacity:0.5;
}
#im2:hover {
 opacity:1;
}
</style>

<h4>Example changing transparency on hover</h4>
<p>Place the mouse over the image below.</p>

<img src='css/html_course.jpg' alt='HTML and CSS Course' width='155' height='160' id='im2' />

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>
#trans {
 display:none;
 position:absolute;
 top:2%;
 left:2%;
 width:96%;
 height:95%;
 background-color:#07fe08;
 opacity:0.5;
}
#cnt {
 position:relative;
 background:#e7e8fe;
 width:300px;
 height:200px;
 border:1px solid blue;
 padding:20px;
}
#cnt:hover #trans { display:block; }
</style>

<h4>Example content hovered with transparency element on hover</h4>

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

<<-CSS3 - text-shadow, word-wrap, .. -- CSS3 2D transforms->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used in <table> to create table header cell?

<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);

Last accessed pages

HTML Course - Free Lessons ^(25954)
For loops in ActionScript ⁽⁴⁵⁴¹⁾
Display data from PHP Array, or MySQL in HTML table ^(26956)
CSS cursor property - Custom Cursors ⁽⁶⁰⁹⁶⁾
Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ^(141776)

Popular pages this month

Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ⁽⁵⁰⁰⁾
CSS cursor property - Custom Cursors ⁽⁸⁴⁾
The Mastery of Love ⁽⁷⁵⁾
PHP-MySQL free course, online tutorials PHP MySQL code ⁽⁶⁵⁾
CSS3 2D transforms ⁽⁴⁶⁾