Css Clip-Bild mit Box-Schatten funktioniert nicht

Question

Ich versuche clip ein Bild. Dieses Bild hat eine Box-Shadow-Eigenschaft.

Wollen Sie mich will, ist ein clip auf das Bild anzuwenden, aber ich mag die box-shadow, nicht auf das Originalbild mantain sondern das clip Bild.

Wie kann ich das tun?

Folgt meinem 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>

Hinweis: Ich möchte mit Javascript oder Jquery zu vermeiden, dieses Problem zu verwalten. Aber natürlich, wenn es keine anderen Lösungen gibt und der Javascript/Jquery-Code notwendig ist, werde ich ihn verwenden.

[EDIT]

Ich möchte, dass das Originalbild und das endgültige Bild haben box-shadow, und die Box Schatten könnte auch animiert werden, wie der Clip ist.

Answer 1

Hier ist meine Lösung, kein Clip benötigt.

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