Element exceeding the size of the div

Question

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

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

HTML:

<div class="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);
}

Answer 1

Just add display: table in the CSS #portfolio figure, thus the dimensions of the element figure will adjust to the dimensions of img and no more of the screen.

#portfolio figure{
  position: relative;
  overflow: hidden;
  display: table;
}
#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);
}

<div id="portfolio">
  <div class="row text-center">
    <div class="col-md-4 col-sm-4">
      <figure>
        <img src="http://placehold.it/200x200" alt="Hidraurio Mangueiras">
      </figure>
    </div>
    <div class="col-md-4 col-sm-4">
      <figure>
        <img src="http://placehold.it/200x200" 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="http://placehold.it/200x200" alt="Hidraurio Mangueiras">
      </figure>
    </div>
 </div>
</div>