CHAPTER 13. POSITIONING: RELATIVE AND ABSOLUTE 144
13.5 Centering
Left, right, top, and bottom work great for positioning relative to the edges.
Corners are easy. But what if you want to put something in the center?
Percentages help us. We can sayleft: 50%;to put the left edge in the
center of the screen. We can saytop: 50%;to put the top edge in the
center of the screen.
But what if we want the middle of the element to be in the middle of the
screen?
We can also usetransform: translateX(-50%);to move the element left
by half of its width, and we can usetransform: translateY(-50%);to
move the element up by half of its height.
Obviously, if we can center this way, we can position something anyplace on
the screen by using the same percentage-based approach.
13.6 Dynamic Repositioning: Hover Effects
http://designshack.net/?p=26842has a fascinating article that answered
a nagging question for me. I wanted to create a sliding-door or opening-
window effect. Unfortunately, those terms seem to be already in use to
identify something other than what I wanted, so it was difficult to find my
objective.
I decided to call it Peek-A-Boo.
Basically, I wanted to show an image that was covered up by another image.
Then, when I hovered my mouse over the stacked images, the hidden picture
would be revealed.
I tried several approaches but nothing really worked. Finally I came across
on the article mentioned above.
This is how he made it work.
Basically you will have a multi-layer background image in an otherwise
empty div. The last layer will be the hidden image. The other layers will
move out of the way when you hover over them.
Decide exactly how big the images are going to be. (There may be a way to
do this automatically, but short of using JavaScript I did not figure anything