0

Alguém pode indicar-me o que fazer para impedir que h4 faça Tremble/Shaking quando faço hover?

Envio em baixo o meu código.

CSS:

films{
    width: 100%;
    height: auto;
    margin-bottom: 30px;
    padding-top: 100px;
    text-align: center;
    float: left;
}

films p{
    font-family: "open sans";
    font-size: 14px;
}

films p a{
    text-decoration: none;
    color: #7FC400;
}

films p a:hover{
    text-decoration: underline;
}

films .gallery{
    width: 80%;
    height: auto;
    margin: 0 10% 80px 10%;
    float: left;
}

films .gallery .left, .center, .right{
    width: 33.33%;
    height: auto;
    text-align: center;
    cursor: pointer;
    float: left;
    position: relative;
    overflow: hidden;
}

films .gallery .image{
    border: 1px solid transparent;
    position: relative;
}

.container .gallery .image:hover{
    opacity: 0.9; 
    border: 1px solid red;
}

films .gallery h4{
    margin: 0;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-family: "open sans";
    position: absolute;
    display: none;
}

films .gallery .image:hover + h4{
    color: white;
    display: inline;
}

HTML:

<div id="films">
      <div class="gallery">
             <div class="left">
                  <img src="images/medronho.jpg" class="image"></img>
                  <h4>Medronho Todos os Dias</h4>
             </div>
             <div class="center">
                   <img src="images/pessoa.jpg" class="image"></img>
                   <h4>Tudo Se Tornou Insuportável Excepto a Vida</h4> 
             </div>
             <div class="right">
                   <img src="images/bells.jpg" class="image"></img>
                   <h4>Bells</h4>   
             </div>
      </div>
</div>
3
  • Coloque o código HTML também
    – Costamilam
    Commented 8/04/2018 às 19:31
  • Sugiro que faça um tour no site para entender melhor seu funcionamento
    – Costamilam
    Commented 8/04/2018 às 19:41
  • Miguel se as respostas te ajudaram use as setinhas do lado esquerdo das resposta para sinalizar, ou escolha uma delas e marca como aceita usando o ícone abaixo das setinhas na resposta que escolher. Assim não deixamos os site desorganizado com Perguntas abertas, mas que já foram resolvidas.
    – hugocsl
    Commented 12/04/2018 às 11:09

1 Resposta 1

0

Para resolver o seu problema adicione o seguinte código ao h4:

#films .gallery h4{
    margin: 0;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-family: "open sans";
    position: absolute;
    display: none;

    /* ADICIONE ISTO */
    pointer-events: none;
}

O problema aqui está que quando passa com o rato em cima to titúlo h4 o evento hover da imagem é ignorada (porque nesse momento não estamos a fazer hover na imagem mas sim na legenda). Esta é a solução mais fácil.

Espero ter ajudado.

Cumprimentos,

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