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余量。

如果你不要想让瓷砖被覆盖物覆盖，请删除指示的线条。