はどのようにZインデックス

Question

https://jsfiddle.net/vaf6nv36/1/

を移行するために風船の画像は、ゆっくりとリンゴの画像の上に移行することができますか？

私はより多くのトランジションパラメータが必要だと思うか、不透明度を使うべきですか？

誰かが助けることができますか？

HTML

<div class="img1"> 

    </div> 
<div class="img2"> 

</div> 

CSS

.img1, .img2{ 
    border: 1px solid black; 
    transition: 1s; 
    position: absolute; 
} 

.img1{ 
    left: 25%; 
    height: 500px; 
    width: 500px; 
    z-index: 1; 
    background-image: url(http://cdn.pcwallart.com/images/balloons-photography-vintage-wallpaper-1.jpg); 
    } 

.img2{ 
    right: 25%; 
    width: 500px; 
    height: 500px; 
    bottom: 0; 
    z-index: 2; 
    background-image: url(https://i.pinimg.com/736x/c1/7b/15/c17b150e93c4e9c50d963b076484bee7--apple-wallpaper-iphone-wallpaper.jpg); 
} 

.img1:hover{ 
     z-index: 999; 
} 

Answer 1

：あなたのアイデアを表示するフィドル探しているもの：z-index値は整数で、できるだけ小さなステップ（整数、カンマなし）で変更すると、他の1つのORの前、またはその逆の前に状態がもたらされます。 2つの要素間で連続したクロスフェードをしたい場合は、opacityのトランジションを使用してください。あなたの特定のケースで

、あなたのdiv要素が互いに直接の上ではなく、唯一の重なっているので、あなたがimg2と同一の第2 DIVを持っていることによってそれを解決することができます（私はそのクラス.img3と呼ばれる）が、z-index: 0とこれにCSSルール：

.img1:hover + .img2 { 
    opacity: 0; 
} 

これはIMG2をフェードアウト、それでもIMG1とIMG2の間の遷移の印象を作成する、しかし背後IMG1あるIMG3を、表示されます。

https://jsfiddle.net/2a2epLfv/1/

.img1, 
 
.img2, 
 
.img3 { 
 
    border: 1px solid black; 
 
    transition: 1s; 
 
    position: absolute; 
 
} 
 

 
.img1 { 
 
    left: 20%; 
 
    height: 300px; 
 
    width: 300px; 
 
    z-index: 1; 
 
    background-image: url(http://cdn.pcwallart.com/images/balloons-photography-vintage-wallpaper-1.jpg); 
 
} 
 

 
.img2, 
 
.img3 { 
 
    right: 20%; 
 
    width: 300px; 
 
    height: 300px; 
 
    top: 100px; 
 
    background-image: url(https://i.pinimg.com/736x/c1/7b/15/c17b150e93c4e9c50d963b076484bee7--apple-wallpaper-iphone-wallpaper.jpg); 
 
} 
 

 
.img2 { 
 
    z-index: 2; 
 
} 
 

 
.img3 { 
 
    z-index: 0; 
 
} 
 

 
.img1:hover+.img2 { 
 
    opacity: 0; 
 
}

<div class="img1"></div> 
 
<div class="img2"></div> 
 
<div class="img3"></div>

Answer 2

Iは、z屈折率変化のみ毎に層を介してステップによって素子パスステップを行う恐れ。効果を上げるには、不透明度のトランジションとスケール/位置のトランジションを組み合わせる必要があります。理論的にはあなたが移行z-indexが、それはあまり意味がないだろう、つまり、あなたは明らかにされているクロスフェード効果をもたらさないことができますが

.img1, .img2{ 
 

 
    border: 1px solid black; 
 
    transition: 1s; 
 
    position: absolute; 
 
} 
 

 
.img1{ 
 
    left: 25%; 
 
    height: 500px; 
 
    width: 500px; 
 
    z-index: 1; 
 
    transform: scale(0.9); 
 
    opacity: 0.5; 
 
    background-image: url(http://cdn.pcwallart.com/images/balloons-photography-vintage-wallpaper-1.jpg); 
 
} 
 

 
.img2{ 
 
    right: 25%; 
 
    width: 500px; 
 
    height: 500px; 
 
    bottom: 0; 
 
    z-index: 2; 
 
    background-image: url(https://i.pinimg.com/736x/c1/7b/15/c17b150e93c4e9c50d963b076484bee7--apple-wallpaper-iphone-wallpaper.jpg); 
 
} 
 

 
.img1:hover{ 
 
    animation: fronte 1s linear forwards; 
 
} 
 

 
@keyframes fronte { 
 
    from { z-index: 0; transform: scale(0.9); opacity: 0.5; } 
 
    to { z-index: 4; transform: scale(1.1); opacity: 1; } 
 
}

<div class="img1"> 
 
</div> 
 
<div class="img2"> 
 
</div>