帶有陰影的Css剪輯圖像不起作用

Question

我正在嘗試clip圖像。此圖像具有箱形陰影屬性。

我想要的是應用clip的圖像，但我想保持box-shadow，而不是原始圖像，但clip圖像。

我該怎麼做？

跟隨我的HTML/CSS3代碼：

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>

注：我想避免使用JavaScript或jQuery來管理這個問題。但是，當然，如果沒有其他解決方案並且javascript/jquery代碼是必需的，我會使用它。

[編輯]

我想原始圖像和最終圖像有箱陰影，而陰影盒可以動畫以及剪輯是。

Answer 1

這是我的解決方案，無需剪輯。

#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>