CSS, scale e transition em imagem.

[Fábio BN 17]

Oi Pessoal, tudo bem?

 

Eu estou usando um CSS que ao passar o mouse sobre uma imagem, ela aumenta de escala gradativamente em cerca de 500ms ela aumenta numa escala ( 1.1), até aqui tudo bem. O problema é que ao retirar o mouse desta imagem, ela retorna ao tamanho inicial mas de forma não gradativa, ou seja, ela simplesmente sai da escala (1.1) e cai para o amanho real, existe alguma forma de fazer essa transição ao inverso também de forma gradativa?

 

Segue meu código:

  /* Figuras Home */
    .fig_home{
    width:205px;
    height:auto;
    }
    .fig_home:hover{
     -webkit-transform:scale(1.1); /* Safari and Chrome */
    -moz-transform:scale(1.1); /* Firefox */
    -ms-transform:scale(1.1); /* IE 9 */
    -o-transform:scale(1.1); /* Opera */
     transform:scale(1.1);
    
    -webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
     }
   /* Figuras Home */

Obrigado!

 

Fábio!

[Emet 6]

Você está usando alguns vendor prefixes que não são mais necessários.

 

Você pode consultar o Can I Use pra saber se usar ou não: http://caniuse.com/#search=transition

 

Para corrigir o problema aplique o mesmo transition no estado normal do elemento (Sem o hover):

.fig_home{
    width: 205px;
    height: auto;
    -webkit-transition: all 500ms;
            transition: all 500ms;
 }
 
.fig_home:hover{
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);

    -webkit-transition: all 500ms;
            transition: all 500ms;
}
   

Exemplo no CodePen: http://codepen.io/anon/pen/GgxdRz

[Fábio BN 17]

Muito Obrigado, funcionou.

 

Abraços!

Fábio!