2D Transforms and Transitions - Beginning CSS3 - page 441

This removes the extraneous space, as shown in Figure 20-11 .
Figure 20-11. The images have been resized in the HTML markup
The images are scaled up to their original size when hovered over, and to prevent them partially
disappearing offscreen, the anchor points are set like this:
.scaleimg:first-child {
transform-origin: left top;
}
.scaleimg:last-child {
transform-origin: right top;
}
.scaleimg:hover {
transform: scale(1.5);
}
As Figure 20-12 shows, the left image is restored to its full size when the mouse pointer is over it.
Figure 20-12. The image is scaled up when hovered over