html - Unable to create box shadow on li pseudo element -


i trying create box shaadow on image somehow unable create one. using :after pseudo element it:

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

now ofcource since img does't support pseudo elements adding shadow li element, still see no shadow , don't understand why ?

can explain? in console in ff, no pseudo elements shown.

p.s. reason using pseudo elements because box-shadow has less 100% of li's width , now, doesn't take account.

trying adding css shadow using following selector .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); } 

Comments

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -