Text wiggle when using CSS transition

Question

In Chrome and Safari, the text in this code (http://codepen.io/igdaloff/pen/cgCFt) wiggles subtly when hovered. I'd like the text to remain stable throughout the transition.

I've tried several alternative methods to accomplish this same effect (explained in this post), but the wiggle remains.

I need the text to remain vertically centered and the content to be completely fluid (percentages only). As long as those requirements are true, I'm open to any solutions. I'm using the most recent browser versions.

Thanks in advance.

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;
}