Efeito Grow com CSS 3

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

Exemplos do Efeito Grow com CSS:

Elemento no seu estado normal:

Hover:

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>