2

A minha ideia é colocar uma imagem invisível na página, que quando em hover, apareça e desencadeie uma animação.

O problema é que assim que eu coloco o ponteiro sob a imagem, a animação fica tremendo, começando e parando várias vezes por segundo. Existe alguma forma de prevenir isso?

Veja aqui (Experimente tirar e colocar o mouse da imagem)

.iconeslide {
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
   -o-transition: all 1s ease;
   transition: all 1s ease;
   opacity: 0.4;
} 

.iconeslide:hover {
    opacity: 1.0;
    -webkit-animation-name: fadeInUp; 
    animation-name: fadeInUp; 
    animation-duration: 500ms;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
<img class="iconeslide" src="http://i.imgur.com/CaSWOIA.png"/>

0

1 Resposta 1

2

Eu estive a testar isto no jsFiddle e consegui remover grande parte desse efeito indesejado da imagem a piscar, removendo o valor opacity da animação @-webkit-keyframes fadeInUp {0% {opacity: 0;}} e criando um wrapper apontando o efeito hover para este novo elemento .imgContainer em vez da imagem em si.

Mas à medida que estava a cavar mais o problema, lembrei-me de uma maneira mais fácil e simples de como podes fazer este efeito. Eis um exemplo:

.imgContainer {
    border: 1px solid #000;
    width: 167px;
    height: 161px;
    position:relative;
    overflow: hidden; /* <-- Opcional. Faz com que a imagem não se sobreponha à linha inferior do quadrado */
}

/* Quando a imagem não está visivel, a imagem fica abaixo do "quadrado" */
.iconeslide {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    
    opacity: 0;
    position:absolute;
    bottom:-50%; /* Aumenta/diminui este valor ao teu gosto */
} 

/* Mas ao passar o mouse por cima da class .imgContainer - mostra a imagem e coloca-a dentro do "quadrado" */
.imgContainer:hover .iconeslide {
    opacity: 1.0;
    bottom:0;
}
<div class="imgContainer">
    <img class="iconeslide" src="http://i.imgur.com/CaSWOIA.png"/>
</div>

1
  • 1
    Obrigado, Chun. Está solução não só funciona perfeitamente, como também é bem mais simples e se encaixa melhor no meu projeto. Commented 1/07/2015 às 23:58

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 .