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
Search WWH ::

Custom Search