HTML and CSS Reference
In-Depth Information
Figure 11-22.
The mask displays only the clipped rectangle
To reveal the rest of the image, the styles in clip.html use the
:active
pseudo-class to reset the value of clip
to the full size of the image like this:
#clipped:active {
clip: rect(0, 500px, 375px, 0);
}
The right and bottom values are the same as the image's width and height respectively. The top and left
values are both
0
because nothing is to be clipped from the top or left.
If you click and hold the mouse button, most browsers reveal the whole image (see Figure
11-23
).
Figure 11-23.
In most modern browsers, holding down the mouse button expands the clip rectangle
