Невозможно создать тень окна на элементе li li

Question

Я пытаюсь создать окно shaadow на изображении, но каким-то образом я не могу его создать. Я использую элемент :after псевдо сделать это:

HTML ::

<ul class="bxslider fade out"> 
    <li> 
     <img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" /> 
    </li> 
</ul> 

CSS ::

.bxslider { 
     margin: 0; 
     padding: 0; 
    } 
    .bxslider li { 
     position: relative; 
    } 
    .bxslider li:after { 
     width: 100%; 
     height: 30px; 
     ; 
     position: absolute; 
     top:100%; 
     left: 0; 
     -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 1); 
     box-shadow: 2px 2px 2px rgba(0, 0, 0, 1); 
    } 
    .bxslider li img { 
     width: 100%; 
     max-width: 300px; 
    } 

FIDDLE HERE

Теперь ofcource так img does't поддержки Псевдо элементы Я добавляю тень к элементу li, b Но я не вижу тени, и я не понимаю, почему?

Может ли кто-нибудь объяснить? Также в консоли в FF не отображаются псевдоэлементы.

P.S. Причина, по которой я использую псевдоэлементы, заключается в том, что ширина ящика должна быть меньше 100% от ширины li, но пока не учитывает это.

Answer 1

Пытается добавить свой CSS для тени, используя следующий селектор .bxslider li img:hover.

http://jsfiddle.net/cxy39rLg/1/

.bxslider li img { 
    width: 100%; 
    max-width: 300px; 
} 
.bxslider li img:hover { 
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); 
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); 
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); 
}