Figcaption transition bug (Mozilla, Edge, IE) - html

Question

I have some images, and on the :hover effect the figcaption should translateY, on chrome it works perfectly, but on the other browsers it shows the figcaption by default how you see below. Where I'm wrong? My website is on air in case of you want to see it by yourself: https://tiagosilveiraa.github.io
Bug on the other browsers:
Right Chrome:
HTML:
<div class="col-md-4 col-sm-6 col-xs-12">
<figure>
<img src="img/hidrau.png" alt="Hidraurio Mangueiras Hidraulicas" class="img-responsive">
<figcaption>
<button >Visitar</button>
<button >Github</button>
</figcaption>
</figure>
</div>
CSS:
#portfolio figure{
display: table;
position: relative;
overflow: hidden;
padding-bottom: 15px;
}
#portfolio img{
width: 100%;
max-width: 100%;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
}
#portfolio figure figcaption{
overflow: hidden;
position: absolute;
bottom: -80px;
height: 80px;
width: 100%;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
color: white;
background-color: #292929;
text-align: center;
justify-content: center;
padding-top: 15px;
}
#portfolio figure:hover figcaption {
transform: translateY(-90px);
-webkit-transform: translateY(-90px);
-moz-transform: translateY(-90px);
-ms-transform: translateY(-90px);
}
#portfolio figure:hover img {
opacity: 1;
transform: translateY(-50px);
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-ms-transform: translateY(-50px);
}