Change to Opacity on Hover Over
.highlight {
opacity: 0.4;
filter: alpha(opacity=40);
}
.highlight:hover {
opacity: 1;
filter: alpha(opacity=100);
}
[[image klematis.jpg class="highlight"]]
[[image klematis2.jpg class="highlight"]]
While opacity is a widely implemented part of the CSS3 Color Module, that specification also includes additional ways to control transparency through CSS. It is now possible to specify an alpha channel to the familiar RGB color model and the new HSL color model. These color models with alpha channels added are called RGBA and HSLA respectively. The alpha channel is specified as the last value of the RGBA or HSLA value, and works much the same way as opacity, with a value between 0 (fully transparent) and 1 (fully opaque). For example, the RGBA value rgba(255, 0, 0, 0.5) is red that is half transparent, half opaque. The difference between opacity and these two new color models is that opacity is applied to the whole element, so the text, background and border will all take the specified opacity. In RGBA and HSLA, it only applies to the property it is specified on, so you can make the background have transparency while keeping the text fully opaque for example.
