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
What attribute makes the input text box to not be modified by the user?
checked="checked" readonly="readonly" disabled="disabled"
<input type="text" value="fixed-value" readonly="readonly" name="a_name" />
What CSS property allows you to create rounded corners in your webpage design?
background-size border-size border-radius
.class {
  border:2px solid blue;
  border-radius:1.2em;
}
What instruction displays a confirmation dialog box to the viewer, who must then click OK or Cancel to proceed?
indexOf() confirm() prompt()
var ques = window.confirm("The result of 0+0 is 0?");
if (ques) alert("Corect");
else alert("Incorrect");
Indicate the PHP function that returns the lowest number of the parameter values.
floor() ceil() min()
$min_nr = min(12, 8, 25, 13);
echo $min_nr;        // 8
CSS3 opacity

Last accessed pages

  1. Get the value of the selected /checked checkboxes in a form (42757)
  2. Loading XML Data, Traversing XML Trees (603)
  3. Contact page - CoursesWeb (45940)
  4. Tabs effect with CSS (46527)
  5. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (53971)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (364)
  2. Tabs effect with CSS (353)
  3. Contact page - CoursesWeb (352)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (133)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (81)