Opacity

Opacity can be applied to different elements, like image and div elements. The color of that element will have a transparent look to it. The transparency can be any value between zero and one. By using the pseudo-class hover, you can create a really unique effects.

To use the opacity effect, you have to use the following code:

filter:alpha(opacity=60);
opacity: 0.6;

According to the W3C, the first syntax is how to use the opacity in Internet Explorer, where as the second syntax is for FireFox. The W3C do not mention how the effect works in other browsers, but with Opera you can use the second syntax.

With some knowledge of the opacity feature in CSS, lets see what we can do with it. Let us first make a watermark on some images. We can do this by making the image a background for a div then apply another div with the opacity set to something high. Since anything in that div will inherit the opacity value we can then put some text in the div. First the CSS code we will need to do this.

<style>
.watermark{
 filter: alpha(opacity=60);
 opacity: 0.3;	
 color: black;
}

.images{
 background: url(images/lightbulb_on.jpg) repeat;
 height: 101px;
 width: 97px;
}

The first thing we did in the CSS was create a div that will apply an opacity filter to anything inside it, and we made the color of the text inside it black. The second class, creates a div with the height and width of our image, and applies the image as a background that does not repeat. By creating two div tags, one with a class of images, and the other with watermark we can now create a watermarked image on our site with CSS. But note, if the user were to download the image, it would not be watermark, this only gives the illusion of a watermarked image. Below is the HTML code to create the effect, followed by an example of the effect.

<div class="images">
 <div class="watermark">Code-Sucks</div>
</div>

The last effect we are going to do will call for the hover pseudo-class to make some text seem to fade in when changing the opacity value.

<style>
.menu{
 opacity: 0.5;
 text-decoration: none;
 background: #dc8f96;
 width: 50px;
}

.menu:hover{
 opacity: 1.0;
 text-decoration: none;
 background: #dc8f96;
}
</style>

As you can see the two menu styles are exactly alike other then the opacity values. This will cause the links to "fade" in when moused over. Just like before, here is the HTML code the effect.

<a href="link address" class="menu">Link 1</a>
<a href="link address" class="menu">Link 2</a>
<a href="link address" class="menu">Link 3</a>