變換：比例和定位

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/