Efeito Grow com CSS 3

Como criar o Efeito Grow com CSS quando mouse passa por cima de um elemento (hover).

Efeito Grow com CSS 3

Exemplos do Efeito Grow com CSS:

Passe o mouse

Elemento no seu estado normal:

Normal

Hover:

Hover ativo

CSS utilizado para o efeito.

Adicionei na folha de estilo do seu projeto a seguinte instrução para o Efeito Grow.

.efeito-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.efeito-grow:hover, .efeito-grow:focus, .efeito-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

Utilize a classe “efeito-grow” nos elementos que você deseja aplicar o efeito.

Você pode ajustar “transform: scale(1.1);” e “-webkit-transform: scale(1.1);” para uma escala maior, 1.2, 1.3, caso você deseja aumentar a percepção do efeito.

Exemplo de utilização da classe:

<div class="efeito-grow"> ... </div>

 

Resumo
Criando efeito Grow com CSS
Nome do Artigo
Criando efeito Grow com CSS
Descrição
Post ensinando a criar o efeito Grow com CSS 3
Autor
Editor
Roger Mauricio Takemiya
Logo do Editor

Dúvidas? Faça um comentário logo abaixo ou envie uma mensagem clicando aqui.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *