CSS3 transparency and opacity property (opacity)

The opacity property of CSS3 is a great tool that help us create interesting effects, such as an transparent image appearance. However before digging into the details, let's review basics about the CSS colors under this link.

CSS3 opacity

The opacity property is used to set the opacity level for an element (any element).

The opacity-level specifies the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. The opacity property can take a value from 0.0 - 1.0. Lower is the value more is the transparency.

Syntax:

selector {

opacity: number | initial | inherit;

}

Values:

number - Determines the opacity level, with 0.0 being fully transparent opacity and 1.0 a regular opacity (fully opaque)
initial (Default value) or inherit

Example

CSS3 image transparency and hover effect example:

<!DOCTYPE html>
<html>
<head><style type="text/css">
h4 {
    font-family:Arial;
}
img {
    opacity: 0.3;
      filter: alpha(opacity=30); } /* IE <= 8.0 */

img:hover {
    opacity: 1.0;
      filter: alpha(opacity=50); } /* IE <= 8.0 */   
}
</style></head>

<body>

<h4>This example shows how transparent images can be used in a gallery or similar applications</h4>
<a href="http://brenkoweb.com/tutorials/javascript" title="Learn JavaScript"><img src="../../../img/tutorials/javascript.png" alt="Learn JavaScript" width="100px" /></a>
<a href="http://brenkoweb.com/tutorials/php" title="Learn PHP"><img src="../../../img/tutorials/php.png" alt="Learn PHP" width="100px" /></a>

</body>
</html>

›› go to examples ››

CSS3 transparency and opacity property (opacity)

CSS3 opacity

Syntax:

Values:

Example

CSS3 image transparency and hover effect example:

Comments

About

Contact

Get Connected