HTML and CSS Reference
In-Depth Information
As figure
20-17
shows, both
<div>
elements are transparent, but the text in the
<div>
on the left is
unaffected, whereas in the one on the right it has been faded along with the background and border.
Figure 20-17.
Opacity (right) affects the entire element
Instead of swapping the image source with JavaScript, this technique relies on superimposing one image on
top of another and using the
opacity
property and a transition to fade out the front image when hovered over. In
fade_image.html, there are two images of the same size alongside each other inside a
<div>
like this:
<div id="images">
<img src="images/nice market.jpg" alt="Flower market in Nice" width="400" height="266"
class="frontimg"
>
<img src="images/nice seafront.jpg" alt="Nice seafront" width="400" height="266">
</div>
The first image is assigned the class
frontimg
, which has the following styles:
.frontimg {
position: absolute;
transition: opacity 500ms linear;
opacity: 1;
}
.frontimg:hover {
opacity: 0;
}
The class makes the image absolutely positioned. As explained in Chapter 11, absolute positioning removes
an element from the document flow and floats it on a separate layer in front of the normal content. If you don't
set any offsets, the element occupies the same position as it would in the normal flow. As a result, the second
image is hidden behind the first one. They have the same dimensions, so the rest of the page is unaffected.
The other properties create a half-second linear transition and set the normal
opacity
to
1
(fully opaque).
The
:hover
pseudo-class changes the level of
opacity
to
0
(fully transparent).
When you hover over the image, it fades to reveal the other image underneath (see Figure
20-18
). Although
you can't see the front image after the fade, it's still there, so you're still hovering over it until you move the mouse
pointer away. Then the front image fades back.
