방법 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 값은 정수입니다. 가능한 가장 작은 단계 (정수, 쉼표 없음)로 변경하면 상태가 다른 하나의 뒤에 오거나 다른 하나 뒤에 오게됩니다. 중간의 "반쪽 상태"는 없습니다. 두 요소 간 연속적인 크로스 페이드를 원한다면 opacity에서 트랜지션을 사용해야합니다. 특정 경우

, 당신 된 DIV 서로 직접 이상하지 않은,하지만 서로 겹쳐 있기 때문에, 당신은 두 번째 DIV 동일 img2에 (I 동급 .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

난 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>