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; }
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
Post a Comment