Animate CSS clip

css

Solution

Your code works just fine. You just have to give it the correct "start" values, like so:

img {
  position: absolute;
  display: block;
  clip: rect(10px, 100px, 200px, 0);
  -webkit-transition: all 0.5s ease-out;
     -moz-transition: all 0.5s ease-out;
          transition: all 0.5s ease-out;
}

img:hover {
  clip: rect(80px, 200px, 250px, 50px);
}

<img src="https://i.stack.imgur.com/Wr86X.jpg">

Problem

I am trying to use CSS3 transitions to animate a CSS `clip` with no sucess. The image just clips without the transition. What am I missing? ``` #clipped { position:absolute; width: auto; clip: rect(100, 100, 100, 100); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } #clipped:hover { clip: rect(50px, 200px, 200px, 0); } ``` Fiddle

Original source