Css Course

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>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which type of <input> creates a date input control, such as a pop-up calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Which CSS property adds shadow effects to the text of an element?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Click on the function that adds new elements to the end of an array.
pop() shift() push()
var pags = ["lessons", "courses"];
pags.push("download", "tutorials");
alert(pags[2]);            // download
Which function sorts an array by key, in ascending order, maintaining key to data correlations?
asort() ksort() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
CSS3 opacity

Last accessed pages

  1. PHP-MySQL free course, online tutorials PHP MySQL code (62813)
  2. Convert BBCode to HTML and HTML to BBCode with JavaScript (7413)
  3. Get Time Elapsed (1471)
  4. Add, Change, and Remove Attributes with jQuery (43457)
  5. PHP MySQL - WHERE and LIKE (26297)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (220)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (211)
  3. Read Excel file data in PHP - PhpExcelReader (209)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (136)
  5. SHA256 Encrypt hash in JavaScript (133)