CODEWITHSUNDEEP
css
Ricardo Rocha
Ricardo Rocha

Reputation: 16266

CSS3 animation/transition in rect clip

I have this jsfiddle code where, only with css, I'm tring apply a clip on a image but without any success.

I tried put a external div and applied the clip to this div that contains the images, but again without success.

Have anyone any idea why this is happening?

Follows the css code:

img{
  width:500px;
  height 100px;
  top:10px;
  left:10px;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,1);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,1);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,1);

}

#image{
   clip: rect(20px, 20px, 20px 20px);
}

Follows the html code:

<div id="image">
  <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg">
</div>

Upvotes: 1

Views: 357

Answers (1)

Harry
Harry

Reputation: 89770

Note: CSS clip property is deprecated and should not be used.

The CSS clip property works only only absolutely positioned elements and so you either need to position the #image absolutely and apply the clip to it (or) position the img absolutely and apply the clip directly to it.

Other thing to note is that the arguments supplied to the rect function specify the offsets from the top-left border edge of the box. So, the values (<top>, <right>, <bottom>, <left>) should all be specified in such a way that they form a proper rectangle.

img {
  position: absolute;
  width: 500px;
  height 100px;
  top: 10px;
  left: 10px;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
  clip: rect(0px, 20px, 20px, 0px);
}

#image {
  position: relative;
}
<div id="image">
  <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg">
</div>

The clip property is transitionable/animatable as a rect and so it is possible to achieve something like in the below snippet.

img {
  position: absolute;
  width: 500px;
  height 100px;
  top: 10px;
  left: 10px;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
  clip: rect(0px, 20px, 20px, 0px);
  transition: all 1s;
}

#image {
  position: relative;
}
#image:hover img {
  clip: rect(0px, 50px, 50px, 0px);
}
<div id="image">
  <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg">
</div>

Upvotes: 1

Related Questions