Ricardo Rocha Ricardo Rocha - 24 days ago 18
jQuery Question

Css clip image with box-shadow does not working

I'm trying to

clip
an image. This image has a box-shadow property.

Want I want is to apply a
clip
to the image but I want to mantain the
box-shadow
, not to the original image but to the
clip
image.

How can I do that?

Follows my HTML/CSS3 code:



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, 500px, 500px, 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>





Note: I want to avoid using javascript or jquery to manage this problem. But of course, if there is no other solutions and the javascript/jquery code is necessery, I will use it.

[EDIT]

I want that the original image and the final image have box-shadow, and the box shadow could be animated as well as the clip is.

Answer

Here's my solution, no clip needed.

#image {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 500px;
  height: 100px; background:url("http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg");
  transition: all 1s;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
}

#image:hover {
  width: 50px;
  height: 50px;
}
<div id="image">

</div>

Comments