CSS轉換淡入，然後消失

Question

如果將鼠標懸停在其中一個未淡化的面上，則在轉換過程中出現一些文本，然後消失。如果你在褪色的表面上做同樣的事情，那麼在轉換過程中出現在文本上方的文字，然後似乎跳到一切後面。

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

我試圖改變所涉及的所有元素的z-index的，但它似乎沒有任何效果。我如何讓它從不可見變爲可見，然後呆在那裏？

這是重要的SCSS

.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

的削減版本，以獲得覆蓋住，加position: absolute和top: 0/left: 0。

像這樣：

.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幫助的，因爲增加了填充到高度和寬度比率計算和我除去3PX餘量。

如果你不要想讓瓷磚被覆蓋物覆蓋，請刪除指示的線條。