使用CSS转换时的文本摆动

Question

在Chrome和Safari中，此代码中的文本（http://codepen.io/igdaloff/pen/cgCFt）在进行悬停时微妙地摆动。我希望文本在整个过渡期保持稳定。

我已经尝试了几种替代方法来实现这种效果（在this post中解释过），但摆动仍然存在。

我需要文字保持垂直居中，内容完全流畅（仅限百分比）。只要这些要求属实，我愿意接受任何解决方案。我正在使用最新的浏览器版本。

在此先感谢。

Answer 1

HTML

<div class="work-home">   
    <ul> 
     <li> 
     <a href=""> 
      <img src="..." /> 
      <h4>Goats</h4> 
     </a> 
     </li> 
    </ul> 
</div> 

CSS

.work-home { 
    text-align: center; 
} 
.work-home li { 
    display: inline-block; 
    position: relative; 
    margin: 0 0 2em; 
    width: 100%; 
} 

.work-home li:hover a:before { 
    opacity: 1; 
    top: 5%; 
    left: 5%; 
    right: 5%; 
    bottom:5%; 
} 

.work-home li:hover h4 { 
    opacity:1; 
} 

.work-home img { 
    width: 100%; 
    -webkit-transition: all 0.1s ease; 
    -moz-transition: all 0.1s ease; 
    -o-transition: all 0.1s ease; 
    transition: all 0.1s ease; 
} 

.work-home a:before { 
    content:""; 
    display:block; 
    opacity: 0; 
    position: absolute; 
    margin: 0; 
    top:0; 
    right:0; 
    left:0; 
    bottom:0; 
    background-color: rgba(0, 160, 227, 0.88); 
    -webkit-transition: all linear .3s; 
    -moz-transition: all linear .3s; 
    -ms-transition: all linear .3s; 
    transition: all linear .3s; 
} 


.work-home h4 { 
    display: block; 
    padding: 0; 
    margin:0; 
    font-family: helvetica, sans-serif; 
    font-size: 4em; 
    color: #ffffff; 
    position:absolute; 
    top:50%; 
    margin-top:-.8em; 
    text-align:center; 
    width:100%; 
    z-index:1; 
    opacity:0; 
    -webkit-transition: all linear .3s; 
    -moz-transition: all linear .3s; 
    -ms-transition: all linear .3s; 
    transition: all linear .3s; 
}