CSS 전환이 사라지고 사라집니다.

Question

this example version of my code 변색이없는 얼굴 중 하나 위에 마우스를 가져 가면 전환하는 동안 일부 텍스트가 표시되어 사라집니다. 중 하나를 통해 똑같은 일을 수행하면 얼굴이 변합니다. 전환하는 동안 텍스트가 그 위에 나타나고 모든 것 뒤로 건너 뛸 수 있습니다.

https://www.youtube.com/watch?v=Dx2d2G9pXb8

나는 관련된 모든 요소의 z 인덱스를 변경 시도했지만 아무 효과가없는 것으로 보인다. 어떻게 보이지 않게 보이도록 보이지 않게 사라지게하고 거기에 머물러있게합니까?

이

는 오버레이, 유지 position: absolute 및 top: 0/ left: 0을 추가 얻을 수있는 중요한 SCS들

.value-tweet-container { 
    z-index: 2000; 
    -webkit-transition: opacity 0.5s ease-in; 
     -moz-transition: opacity 0.5s ease-in; 
     -ms-transition: opacity 0.5s ease-in; 
     -o-transition: opacity 0.5s ease-in; 
      transition: opacity 0.5s ease-in; 
    opacity: 0; 
    &:hover{ 
     opacity: 1; 
    } 
} 

Answer 1

의 삭감 버전입니다. 이처럼

: 그것은 높이와 너비 비율 계산에 패딩을 추가하고 난 3px의 마진을 제거로

.value-tweet-container { 
    position: absolute; 
    box-sizing: border-box; /* Remove if you don't want to cover the entire tile */ 
    top: 0; 
    left: 0; 
    height: 100%; /* Remove if you don't want to cover the entire tile */ 
    width: 100%; /* Remove if you don't want to cover the entire tile */ 
} 

Here is your new pen.

border-box 도움이됩니다.

타일이 오버레이로 덮여지기를 원하지 않는 경우, 표시된 부분을 제거하십시오.