Let’s play with Mozilla’s CSS again. Now we’ll try to make a cool transparent element with -moz-opacity property. This property is also available in CSS3 specification with the name opacity. Using this property, you can control how solid your element is. The value is ranged from 0 (full-transparent) to 1 (solid). So, 0.5 value means the element is 50% transparent.

Watch the sample below:

All of the 4 boxes actually have the same color, red. What make each looks different is the -moz-opacity setting. Box #1 has 25% opacity (0.25), box #2 has 50% opacity (0.5), box #3 has 75% opacity (0.75), and the last box #4 has 100% opacity (1).

Here’s the code:
[css].bigBox {
background-color: black;
width: 100px;
height: 100px;
border: 1px solid #000;
margin: 0 5px 10px 0;
padding: 0;
float: left;
display: block;
}

.box1, .box2, .box3, .box4 {
background-color: red;
width: 50px;
height: 50px;
border: 0;
margin: 0;
padding: 0;
float: left;
text-align: center;
color: white;
}

.box1 {
-moz-opacity: 0.25;
opacity: 0.25;
}

.box2 {
-moz-opacity: 0.5;
opacity: 0.5;
}

.box3 {
-moz-opacity: 0.75;
opacity: 0.75;
}

.box4 {
-moz-opacity: 1;
opacity: 1;
}[/css]

[html]

[/html]

Try to combine this with element who has background image and you’ll surely get a nice effect. Hover will look good too. I already implement this in my comment list element. If you want to see it, just find any post in my blog that has lot of comments, and check out the comment box :))

Good luck :d