Como usar la propiedad Clip en CSS

La propiedad Clip es muy interesante pero no veo que mucha gente lo use y es muy raro ya que esta propiedad esta desde CSS 2.1.

Clip es una mascara que se le puede colocar a un elemento, en especial a una imagen que es donde se logra ver mejor el efecto.

Para poder usar Clip se tiene que tener la siguiente línea de código:

img.foto{
  position: absolute;
  top : 5px;
  left: 5px;
  clip : rect(90px;300px;180px;100px);
}

Se tiene que tener en cuenta que:
– Al elemento que se le aplica el clip tiene que tener posición absoluta.
– Definir como aplicar el Clip según a un conjunto de coordenadas que pueden ser en px, %, em , etc.

Si tu colocas

  clip : rect(20px;300px;180px;100px);

A nivel gráfico equivale a esto

 Ejemplo Clip

Hasta ahi ya es muy útil esta propiedad, pero además funciona muy bien cuando le agregamos animate de css3

See the Pen Clip With CSS3 by Erik Flores (@erikfloresq) on CodePen.

Como se vio en el ejemplo anterior solo fue cosa de cambiar las coordenadas de la mascara al momento de hacer hover, para que el clip se anime de una manera más que vistosa.