Transparent Box

When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:

I added new div classes called div.op1, div.op3 and div.op6 to my CSS file. Then I add the op(x) class to the div(x) I want to make the div transparency level desired. I also add style="display: inline-block; margin: auto;" to each of the <div class"op(x)"> tag so they line up in a row. I also added the op(x):hover class to my CSS file to change the opacity to 1.0 on mouse over.

A person may use any class name and any opacity level that suits their needs. Just make sure the element.classname is followed by the element.classname:hover pseudo-class in the CSS file and class="classname" is added to make the corresponding tag in the HTML file.

The inline styles used on this page

<div class="op1" style="display: inline-block; margin: auto;">
<div class="op3" style="display: inline-block; margin: auto;">
<div class="op6" style="display: inline-block; margin: auto;">
<div style="background: green; display: inline-block; margin: auto;">

The styles used in the external stylesheet

div.op1 {
    background: green;
    padding: 1px;
    opacity: 0.1;
}

div.op1:hover {opacity: 1.0;}

div.op3 {
    padding: 1px;
    opacity: 0.3;
    background: green;
}

div.op3:hover {opacity: 1.0;}

div.op6 {
    background: green;
    padding: 1px;
    opacity: 0.6;
}

div.op6:hover {opacity: 1.0;}