Tremble/ Shaking when I do Hover in H4

Asked

Viewed 36 times

0

Can someone tell me what to do to stop h4 do Tremble/Shaking when I do hover?

Send down my code.

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>
html css hover

  • Enter the HTML code as well

  • I suggest you make a tour on the site to better understand its operation

  • Miguel if the answers helped you use the arrows on the left side of the answers to signal, or choose one of them and mark as accepted using the icon ✔ below the arrows in the answer you choose. So we do not leave the site unorganized with Open Questions, but that have already been solved.

1 answer

0


To solve your problem add the following code to the 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;
}

The problem here is that when it passes with the mouse on top to titúlo H4 the event Hover image is ignored (because at the moment we are not doing Hover in the image but rather in the caption). This is the easiest solution.

I hope I’ve helped.

Regards,

Browser other questions tagged html css hover

You are not signed in. Login or sign up in order to post.