css - ボックス シャドウ スタイルを画像に直接適用する

Question

パディング/シャドウのスタイリングを取得するために、次のようにコード化された画像があります。

 <div class="slick-shadow"><img src="/images/image.jpg" alt="image"></div>

クラス slick-shadow を画像に直接適用しようとしましたが、影の部分は表示されず、パディングだけでした。CSS を変更して画像に直接作用させ、同じ視覚的外観を実現する方法はありますか?

CSSは次のとおりです。

.slick-shadow {
    position: relative;
    background: #fff;
    padding:5px;
}
.slick-shadow:before, 
.slick-shadow:after {
    z-index: -1; 
    position: absolute; 
    content: "";
    bottom: 15px;
    left: 10px;
    width: 44%; 
    top: 80%;
    max-width:300px;
    background: rgba(0, 0, 0, 0.5); 
    -webkit-box-shadow: 0 16px 10px rgba(0,0,0, 0.4);   
    -moz-box-shadow: 0 16px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 0 16px 10px rgba(0, 0, 0, 0.4);
    -webkit-transform: rotate(-3deg);    
    -moz-transform: rotate(-3deg);   
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
} 
.slick-shadow:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}