Como animar elementos ao passar o mouse sobre um grupo ou célula de grade

A Animação de Elemento ao passar o mouse sobre um Grupo ou uma Célula de Grade também é interessante. Esses efeitos de animação parecem elegantes e naturais. Escolha um elemento em um grupo, clique no link da seção Hover do painel de propriedades e marque a caixa de seleção Hover. Selecione uma Predefinição e, a seguir, modifique as propriedades para obter o efeito projetado.
Animação ao passar o mouse sobre o grupo

Navegue por categorias de recursos

Escala de Elemento no Box Hover

Dimensionar elementos ou redimensionar proporcionalmente ao passar o mouse pode ser um efeito de animação interessante que pode impressionar seus visitantes. Você pode escolher Scale Preset e então modificar as propriedades do Hover On Group no Property Panel clicando no link correspondente. Para testar, clique em algum lugar no Bloco e passe o mouse.

Mudança de elemento ao passar o mouse sobre a caixa

Deslocar um elemento ao passar o mouse é um efeito natural, pois você cria uma reação em um mouse pairando sobre um grupo imitando qualquer coisa em movimento comumente conhecida. No painel de propriedades à direita, o painel Hover On Group, você pode escolher o Shift Preset. Teste-o desmarcando e passando o mouse sobre um Grupo.

Deslocamento do elemento ao passar o mouse sobre a caixa

Você também pode animar o movimento vertical ao passar o mouse para um elemento agrupado. Pequenos movimentos para cima são uma reação de Hover muito popular no web design moderno. Você pode escolher o Shift Up Preset no painel de propriedades à direita, no painel Hover On Group. Desmarque e passe o mouse sobre um grupo para testar o movimento do elemento.

Cor do elemento ao passar o mouse sobre a caixa

Para os Elementos de Célula de Grade ou agrupados, você pode alterar a Cor do Elemento ao passar o mouse e ao passar o mouse por um Grupo ou uma Célula de Grade. Selecione um elemento em um grupo. Selecione o grupo Hover On da seção Animation On e modifique as propriedades de cor no painel de propriedades. Desmarque o elemento e, em seguida, passe o mouse sobre o grupo para testar.

Sombra do elemento ao passar o mouse sobre a caixa

Para um elemento em um grupo ou célula de grade, você pode alterar a propriedade Shadow em Group Hover. Adicionar sombra a um elemento cria um efeito pseudo-3D, que é muito popular em web design. Na seção Hover On Group do Property Panel, selecione Shadow Preset e, opcionalmente, edite a Shadow, se necessário.