Element exceeding the size of the div

I have a col-md-4 that has a figure and a figcaption , while hovering the mouse on it should be displayed figcaption with two buttons the effect works, the problem is that figcaption is exceeding width of image. Any suggestions?

Note that if I move the mouse in the blank area next to the image the effect also occurs, when it should only occur when hovering over the image.

HTML:

<divclass="row text-center">
    <div class="col-md-4 col-sm-4">
      <figure>
        <img src="img/hidrau.png" alt="Hidraurio Mangueiras">
      </figure>
    </div>
    <div class="col-md-4 col-sm-4">
      <figure>
        <img src="img/Gescolar.png" alt="Hidraurio Mangueiras">
        <figcaption>
        <a href="http://hidrauriomangueiras.com.br" target="_blank"><button class="btn-legenda">Visitar</button></a>
        <a href="https://github.com/tiagosilveiraa/hidraurio" target="_blank"><button class="btn-legenda">Github</button></a>
        </figcaption>
      </figure>
    </div>
    <div class="col-md-4 col-sm-4">
      <figure>
        <img src="img/hidrau.png" alt="Hidraurio Mangueiras">
      </figure>
    </div>
 </div>

CSS:

#portfolio figure{
  position: relative;
  overflow: hidden;
}
#portfolio img{
  transition: all 0.4s ease;
}

#portfolio figure figcaption{
  overflow: hidden;
  position: absolute;
  bottom: -80px;
  height: 80px;
  width: 100%;
  transition: all 0.4s ease;
  color: white;
  background-color: #eeeeee;
}
#portfolio figure:hover figcaption {
  transform: translateY(-80px);
}
#portfolio figure:hover img {
  opacity: 1;
  transform: translateY(-50px);
}