ボックスシャドーのCssクリップ画像がうまくいきません

Question

私はclipに挑戦しています。この画像にはボックスシャドウプロパティがあります。

画像にclipを適用したいのですが、box-shadowを元の画像ではなくclipの画像に変更したいと考えています。

どうすればいいですか？

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>

注：

は私のHTML/CSS3のコードの後に​​続く、私はこの問題を管理するためにjavascriptやjqueryのを使用しないようにしたいです。しかし、もちろん、他に解決策がなく、javascript/jqueryコードが必要な場合は、私はそれを使用します。

原画像と最終画像はボックス影を有し、ボックスシャドウをアニメーション化することができるだけでなく、クリップであること[EDIT]

欲しいです。

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>