问题描述:

i have issue on box-shadow is not follow the div.

i set the z-index but still not working, please help.

box-shadow is always behind the pseudo class

below here is the html code:

<div class="img-holder sub-images">

<img src="http://dl.dropbox.com/u/80589894/mobileUI/images/flash0.png" />

<div class="back-image"></div>

</div>

css:

.img-holder{

width:80px;

height:71px;

position: relative;

z-index:1;

text-align: center;

margin:10px 15px;

border:solid 3px #fff;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

-webkit-box-shadow: 0 1px 5px rgba(15, 15, 15, 0.66);

-moz-box-shadow: 0 1px 5px rgba(15, 15, 15, 0.66);

box-shadow: 0 1px 5px rgba(15, 15, 15, 0.66);

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.img-holder img{

cursor:pointer;

max-width:100%;

}

.sub-images:after{

content: " ";

background:url(http://dl.dropbox.com/u/80589894/mobileUI/images/cat-blank-bg.jpg) top center no-repeat;

width:100%;

height:100%;

position: absolute;

z-index:-1;

border:solid 3px #fff;

top:-3px;

left: -3px;

top:0px \9;/* IE 9 */

left: 0px \9;/* IE 9 */

-ms-transform:rotate(-10deg); /* IE 9 */

-webkit-transform: rotate(-10deg);

-moz-transform: rotate(-10deg);

transform: rotate(-10deg);

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

-webkit-box-shadow: 0 1px 5px rgba(15, 15, 15, 0.66);

-moz-box-shadow: 0 1px 5px rgba(15, 15, 15, 0.66);

box-shadow: 0 1px 5px rgba(15, 15, 15, 0.66);

}

check this:

http://jsfiddle.net/3WuST/

网友答案:

You need to swap some of the CSS around in .img-holder and .img-holder img. See http://jsfiddle.net/3WuST/1/

相关阅读:
Top