2

Galera, eu tenho uma thumbnail do bootstrap, implementei dentro dela uma div de legenda, que deve aparecer com o mouse em cima. Só que ela está estourando o tamanho da div pai, que no caso é a Thumbnail e a col-md-4, dessa forma sobram algumas rebarbas da div interna, e quando eu coloco a pseudo-classe :hover, o efeito não rola, onde estou errando? Até o momento ela está assim:

Como está:

Eu gostaria que ficasse mais ou menos assim:

Fonte: http://diogorodrigues.com.br/

Fonte: http://diogorodrigues.com.br/

.hover{
  margin: 0px;
  padding: 0px;
  display: block;
  color: white;
  overflow: hidden;
  height: 97%;
  box-sizing: border-box;
  width:  98%;
  text-align: center;
  position: absolute;
  max-width: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.5);
}

.legenda{
  padding-top: 25%;
}

.btn-legenda{
  font-family: 'Roboto', sans-serif;
  color: white;
  background-color: rgb(0, 0, 0);
  letter-spacing: 2px;
  padding: 10px;
  font-size: 1.2em;
  border: 0.5px solid white;
  transition: all 0.4s linear;
}

.btn-legenda:hover{
  background-color: white;
  color: black;
}

.hover:hover{
  transform: translateY();
}
<div class="col-md-4 col-sm-4">
  <div class="thumbnail">
    <div class="hover">
      <div class="legenda">
        <button class="btn-legenda">Ver este Projeto</button>
      </div>
    </div>
    <img src="img/hidrau.png" />
  </div>
</div>

1
  • Seria mais simples de ajudar se você pudesse recriar o problema aqui. Commented 10/04/2017 às 13:00

2 Respostas 2

1

Consegui resolver assim:

.thumbnail{
  position: relative!important;
  border: none !important;
}
.hover{
  margin: 0px;
  padding: 0px;
  display: block;
  color: white;
  overflow: hidden;
  height: 97%;
  box-sizing: border-box;
  width:  98%;
  text-align: center;
  position: absolute;
  max-width: 100%;
  display: block;
  opacity: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: all 0.5s ease;
}
.hover:hover{
  opacity: 1;
}
.legenda{
  padding-top: 25%;
}
.btn-legenda{
  font-family: 'Roboto', sans-serif;
  color: white;
  background-color: black;
  letter-spacing: 2px;
  padding: 10px;
  font-size: 1.2em;
  border: 0.5px solid white;
  transition: all 0.4s linear;
}
<div class="col-md-4 col-sm-4">
  <div class="thumbnail">
    <div class="hover">
      <div class="legenda">
        <button class="btn-legenda">Ver este Projeto</button>
      </div>
    </div>
    <img src="img/hidrau.png">
  </div>
</div>

1

Precisei fazer alguns ajustes no seu CSS, mas não mexi no HTML.

Deixei tudo comentado no CSS. Agora o overlay preto não ultrapassa o elemento pai, pois estou usando a função calc() do CSS para descontar as margins e paddins de outras classes que estava influenciando nisso. (também coloquei uma classe na img{} cara que todas as imagens ocupem o espaço total do Thumbnail e não sobrem espaços em branco)

OBS: Importante. O Bootstrap muda alguns Paddins e Margins para algumas classe dependendo do tamanho da tela. Então é precisa adiciona esse @media para o overlay preto funcionar direitinho em todas as telas. (Dica do @dvd em outra resposta)

@media screen and (min-width: 768px) {
.hover{
    /* calcula o tamanho total menos as margins e padding dos elementos pai */
    height: calc(100% - 30px);
    }
}

Execute o Snippet em "Página Toda" para ver direito já que está com <div class="col-md-4 col-sm-4">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>

    .hover{
        position: absolute;
        margin: 0px;
        padding: 0px;
        /* calcula o tamanho total menos as margins e padding dos elementos pai */
        height: calc(100% - 10px);
        width: calc(100% - 40px);
        box-sizing: border-box;
        transition: all 0.25s linear;
    }
    .hover:hover{
        background-color: rgba(0, 0, 0, 0.5);
    }

    /* para alinhar btn no centro do tumbnail */
    .legenda{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .btn-legenda{
        font-family: 'Roboto', sans-serif;
        color: white;
        background-color: rgb(0, 0, 0);
        letter-spacing: 2px;
        padding: 10px;
        font-size: 1.2em;
        border: 0.5px solid white;
        transition: all 0.4s linear;
    }

    .btn-legenda:hover{
        background-color: white;
        color: black;
    }

    /* para deixar a img em 100% do tumbnail */
    img {
        min-width: 100%;
        height: auto;
    }

    /* nas tela maiores tem um ajuste de padding na classe e vc precisa corrigir a altura */
    @media screen and (min-width: 768px) {
    .hover{
        /* calcula o tamanho total menos as margins e padding dos elementos pai */
        height: calc(100% - 30px);
        }
    }

</style>
</head>
<body>

<div class="col-md-4 col-sm-4">
    <div class="thumbnail">
        <div class="hover">
            <div class="legenda">
                <button class="btn-legenda">Ver este Projeto</button>
            </div>
        </div>
        <img src="http://placecage.com/300/400" />
    </div>
</div>
<div class="col-md-4 col-sm-4">
    <div class="thumbnail">
            <div class="hover">
        <div class="legenda">
            <button class="btn-legenda">Ver este Projeto</button>
        </div>
        </div>
        <img src="http://placecage.com/300/200" />
    </div>
</div>

    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

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 .