CHAPTER 13. POSITIONING: RELATIVE AND ABSOLUTE 145
out.)
Then make the images the right size and specify the div (or whatever) to
also be the right size.
Finally, use :hover to adjust the background position of the front images so
they slide out of the way, possibly with a transition time.
Here is an example that I worked up. It uses two images, barndoor.png
(400x450) and don.jpg (400x475) set into a div that is specified to be
400x450. (The bottom 25ps of don.jpg will not be shown.)
The barndoor image is used twice, once offset to the left by 200px, and once
offset to the right by 200px. When :hover comes into effect, the offset is
increased to 400px to push the barndoor completely out of the way, revealing
the bottom image, a picture of myself.
To further dress things up a bit, I used border-radius to round the corners
of the overall image.
<!DOCTYPE html>