变换：比例和定位

Question

当我应用变换比例“z-索引被改变”时，这是怎么回事？ 我错过了什么？玩变形有没有什么“窍门”？

.thumb > a .img-cover{ 
    -webkit-transition: all 1.2s ease-out;border-radius:5px; 
    -webkit-transform: scale(1); 
} 
.img-cover{ 
    position:relative; 
    overflow:hidden; 
} 
.img-cover:before{ 
    position:absolute; 
    top:0;left:0;right:0;bottom:0; 
    content:""; 
    box-shadow: inset 0px 0 100px #f0f;} 
.thumb > a:hover img { 
    -webkit-transform: scale(1.1); 
} ​ 

HTML

<div class="container"> 
    <article class="thumb"> 
     <a href="#"> 
      <div class="img-cover"><img src="http://placekitten.com/300/120"/></div> 
      <span>thumb-desc</span> 
     </a> 
    </article> 
</div>​ 

live demo

Answer 1

自己定义z-index所以它会为你做它。

.img-cover:before{ 
    position:absolute; 
    z-index: 10; 
    top:0;left:0;right:0;bottom:0; 
    content:""; 
    box-shadow: inset 0px 0 100px #f0f;} 
.thumb > a:hover img { 
    z-index: 0; 
    -webkit-transform: scale(1.1); 
} 

Example Code

Answer 2

当属性position: absolute被设置，目的是退出该流程。这就是为什么对齐不同，看起来像z-index已经改变。手动设置z-index可以解决这个问题。

Answer 3

给z-index添加到您的.img-cover:before的a:hover。像这样写：

.thumb > a:hover .img-cover:before{ 
    z-index:2; 
} 

入住这http://jsfiddle.net/8uhNK/12/

Answer 4

你自己说的 “z-index的改变”。因此，您必须设置z-index的.img-cover和.img-cover:before,的.img-cover必须具有比.img-cover:before的z-index更低的值。

例如： http://jsfiddle.net/skeurentjes/8uhNK/10/