CSS 전환을 사용하여 이미지 뒤의 이미지의 확대 효과

Question

일러스트레이션 포트폴리오 사이트를 만들고 CSS 전환을 사용하여 상자의 배율을 확대하여 자세한 미리보기 이미지를 표시합니다.

하지만 작은 이미지 위에 마우스를 할 때 그들은 항상 같은 서로 뒤에 것으로 보인다 때문에 어려움을 겪고 오전 : 나는 앞에가는 등 사용자가 이미지의 세부 사항을 볼 수 있습니다 그들을 필요로 demo

합니다.

나는 모든 구조를 가지고 있는데, 나는 스스로를 뒤에 놓아두기 위해 내가 잘못하고있는 것을 말할 수 없다.

도움이 될만한 의견이 있습니다.

스케일링 효과를위한 코드입니다! z-index 더 낮은 Z- 색인 요소를 밀어주는 것이다

scale { 
-webkit-transition: all .5s ease; 
-moz-transition: all .5s ease; 
-o-transition: all .5s ease; 
transition: all .5s ease; 

}

.scaleMe:hover { 
transform: scale(1.2); 
-webkit-transform: scale(1.2); 
-ms-transform: scale(1.2); 
-o-transform: scale(1.2); 
-moz-transform: scale(1.2); 
-webkit-box-shadow: 3px 3px 3px #666666; 
-moz-box-shadow: 3px 3px 3px #666666; 
-o-box-shadow: 3px 3px 3px #666666; 
box-shadow: 3px 3px 3px #666666; 

}

Answer 1

.scaleMe:hover { 
    z-index: 1; 
} 

. 기본값은 0입니다. Fiddle