[element] {
opacity: 0.8;
filter: alpha(opacity=80)
transition: opacity 0.7s;
-moz-transition: opacity 0.7s;
-webkit-transition: opacity 0.7s;
-o-transition: opacity 0.7s;
}
[element]:hover {
opacity: 1;
filter: alpha(opacity=100)
}
[element] refers to the thing you want to change (remember the . or #).
opacity is used for most web browsers, it defines how much background is visible in the
[element]; this uses a decimal value out of a total of 1. The
filter:alpha is used in Internet Explorer because they like to be diff
iculterent; this uses a percentage-like value out of 100. 1 (or 100, in
filter's case) refers to no transparency.
transition and its counterparts (
-moz- etc) refers to the transition or fade. The timing is can be in either seconds (s) or milliseconds (ms).
Fun fact: none of the values have to be the same for it to work, the outcomes will just be different in different browsers.