0

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.

inserir a descrição da imagem aqui

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);
}
1
  • Está faltando o código HTML e o código no GitHub não está linkado.
    – Amzero
    Commented 15/05/2017 às 23:03

1 Resposta 1

1

Basta adicionar display: table no CSS #portfolio figure, desta forma as dimensões do elemento figure se ajustarão às dimensões de img e não mais da tela.

#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>

1
  • O efeto agora funcionou perfeitamente, mas os elementos deram uma andada pra esquerda kkk alguma sugestão para acertar? Pensei em aumentar o padding, ou a margin... Commented 15/05/2017 às 23:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .