2

変換スケールを適用すると、「z-indexが変更される」のはどうですか？私は何が欠けていますか？トランスフォームで遊ぶための「トリック」はありますか？

.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>​

ライブデモ

4

4 に答える 4

0

それがあなたのためにそれをするようにあなた自身を定義して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);
}

サンプルコード

于 2012-11-08T11:09:49.123 に答える
0

プロパティposition: absoluteが設定されている場合、オブジェクトはフローから外れます。これが、配置が異なり、z-index が変更されたように見える理由です。z-index を手動で設定すると、この問題を解決できます。

于 2012-11-08T11:11:04.130 に答える
0

onにz-indexを指定します。次のように書きます。.img-cover:beforea:hover

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

これをチェックしてくださいhttp://jsfiddle.net/8uhNK/12/

于 2012-11-08T11:12:23.250 に答える
0

あなたは自分で言った、「z-indexが変更されました」。したがって、z-indexof.img-coverとを設定する必要があり.img-cover:beforeます。z-indexofはof.img-coverよりも低い値にする必要があります。z-index.img-cover:before

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

于 2012-11-08T11:12:55.203 に答える