Tremble / Shaking when I hover on h4

Can anyone tell me what to do to prevent h4 do Tremble / Shaking when I do hover ?

I'm submitting my code below.

CSS:

films{
    width: 100%;
    height: auto;
    margin-bottom: 30px;
    padding-top: 100px;
    text-align: center;
    float: left;
}

films p{
    font-family: "open sans";
    font-size: 14px;
}

films p a{
    text-decoration: none;
    color: #7FC400;
}

films p a:hover{
    text-decoration: underline;
}

films .gallery{
    width: 80%;
    height: auto;
    margin: 0 10% 80px 10%;
    float: left;
}

films .gallery .left, .center, .right{
    width: 33.33%;
    height: auto;
    text-align: center;
    cursor: pointer;
    float: left;
    position: relative;
    overflow: hidden;
}

films .gallery .image{
    border: 1px solid transparent;
    position: relative;
}

.container .gallery .image:hover{
    opacity: 0.9; 
    border: 1px solid red;
}

films .gallery h4{
    margin: 0;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-family: "open sans";
    position: absolute;
    display: none;
}

films .gallery .image:hover + h4{
    color: white;
    display: inline;
}

HTML:

<div id="films">
      <div class="gallery">
             <div class="left">
                  <img src="images/medronho.jpg" class="image"></img>
                  <h4>Medronho Todos os Dias</h4>
             </div>
             <div class="center">
                   <img src="images/pessoa.jpg" class="image"></img>
                   <h4>Tudo Se Tornou Insuportável Excepto a Vida</h4> 
             </div>
             <div class="right">
                   <img src="images/bells.jpg" class="image"></img>
                   <h4>Bells</h4>   
             </div>
      </div>
</div>