HTML and CSS Reference
In-Depth Information
Figure 20-18.
Hovering over the front image triggers a cross-fade to reveal the image behind
Sliding an Image Out of View
A simple variation on the technique in the previous section uses the
translateX()
transform function to move
the front image far enough to the left to hide it offscreen. The styles in slide_image.html look like this:
.frontimg {
position: absolute;
transition: 1s linear;
}
.frontimg:hover {
transform: translateX(-442px);
}
This creates a linear transition to slide the front image to the left over one second, revealing the other image
behind it (see Figure
20-19
).
Figure 20-19.
The front image slides offscreen when hovered over
