How to Set opacity using CSS 3

text size: T | T Related software / service: CSS Design Wizard

Problem

Sometimes, you want to change the opacity for the elements of your webpage to make them fade in and out, such as you can set your background or images to achieve gradient effects. In this case, CSS 3 provides property Opacity to set opacity for your elements. The following steps will show you how to set it.

Solution

Opacity: sets elements transparent in CSS 3, syntax: "opacity: <alphavalue> or inherit". Where the values:

alphavalue: values of transparency, from 0.0 (fully transparent) to 1.0 (fully opaque).
Initial value: 1.0 (opaque);
Inherit: be same with the parent.

The browsers that support the attribute are: Netscape 7, Mozilla 1,Firefox 1 2, Opera 9, Safari 1. If you want to set opacity in IE, you can use the property Alpha filter, which set the values from 0.0 (fully transparent) to 1.0 (fully opaque), syntax: filter: alpha (opacity=< alphavalue >). For some older versions of Mozilla, you need to add the prefix -moz-, such as: -moz-opacity:0.5;

Here, I will give some examples to set opacity.

Create a basic html file:
<html>
<head>
<title>How to set opacity using CSS 3</title>
<style>
p
{
width:100%;
height:50px;
background-color:green;
}

</style>
</head>
<body>
<p>The text has opacity: 0.6.</p>
<img src="background-image06.jpg"/>
</body>
</html>

The initial effect is showed below:
In order to set opacity, add the following CSS codes between <head> and </head>. Here, I set the text to
60% transparent and set the image to 50% transparent.
<style type="text/css">

p
{
width:100%;
height:50px;
background-color:green;
float:left;
filter: alpha(opacity=60);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
-moz-opacity: 0.60;
opacity:0.6;
}

img {
width:400px;
height:400px;
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.50;
opacity:0.5;
}

</style>

This is how the effect would look like:
You can also set the opacity on the image itself and it will fade into the background, repalce the codes, "" between < body > and </ body >. The effect is same with above.
<img src="background-image06.jpg"
style="filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.50;
opacity:0.5;"/>
You can use :hover to change the opacity of the image by hover effects. The CSS codes:.
#imghover a:hover img
{
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.50;
opacity:0.5;
}

I use a class, #imghover for the image, so we need to modify the html codes:
<div id="imghover">
<a href="#"><img src="background-image06.jpg" style="width:400px;height:400px;border:none;"/></a>
</div>

When you move over the image, it will fade in. The effect is showed as the figure below.
You can also place text over an image and make the image fade out where the text is.
First, create a html file that dispalys an image:
<html>
<head>
</head>
<body>
<div id="image">
<img src="background-image06.jpg"/>
</div>
</body>
<html>

Place an empty div that is where you want to set the opacity follow the image.
<div id="image">
<img src="background-image06.jpg"/>
<div id="text"></div>
</div>

Then add the text that is over the image.
<div id="image">
<img src="background-image06.jpg"/>
<div id="text"></div>
<div id="words">This is an interesting picture, isn't it?</div>
</div>

To place text over an image, you need to add the following codes between <head> and </head>. I place the text on the left side of the image, you can place it on the right by changing two attributes "left:0;" to "right :0;" .
<style>
#image {
position:relative;
width:200px;
height:200px;
margin:0;
}
#text {
position:absolute;
top:0;
right:0;
width:100px;
height:200px;
background:#fff;
padding:5px;
}
#text {
filter: alpha(opacity=40);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.40;
opacity:0.4;
}
#words {
position:absolute;
top:0;
right:0;
width:100px;
height:200px;
background:transparent;
padding:5px;
}
</style>

This is how the effect would look like: