Tenho uma col-md-4
que tem uma figure e uma figcaption
, ao passar o mouse em cima deve ser exibida a figcaption
com dois botõezinhos o efeito funciona, o problema é que a figcaption
está excedendo a largura da imagem. Alguma sugestão?
Note que se eu passar o mouse na área em branco ao lado da imagem o efeito também ocorre, quando deveria ocorrer apenas ao passar o mouse sobre a imagem.
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);
}