Float

O elemento sobe e depois balança para cima e para baixo sem parar enquanto está sob o mouse.

Adicione um efeito de hover "Bob" (também chamado hang) em [onde].
O elemento deve subir um pouco e depois continuar balançando suavemente para cima e para baixo enquanto o ponteiro estiver sobre ele, e descer de volta quando o ponteiro sair: lento e suave.
Repita o balanço só durante o hover e deixe o elemento parado se o usuário preferir movimento reduzido (prefers-reduced-motion).

Ao passar o mouse, uma sombra suave aparece ou se aprofunda sob o elemento, sugerindo elevação.

Adicione um efeito "Hover Shadow" (também chamado drop shadow on hover ou elevation on hover) em [onde].
Uma sombra suave sob o elemento deve se aprofundar e se espalhar enquanto o ponteiro estiver sobre ele, para parecer elevado, e voltar ao normal quando o ponteiro sair, sem o elemento sair do lugar.
Mantenha a sombra sutil o bastante para funcionar nos temas claro e escuro, e mostre o mesmo efeito no foco do teclado.

Ao passar o ponteiro, o elemento desce alguns pixels, como se fosse pressionado para dentro da página.

Adicione um efeito de hover "Sink" em [onde].
O elemento deve descer um pouco e ficar lá enquanto o ponteiro estiver sobre ele, como se fosse pressionado para dentro da página, e subir de volta quando sair: suave, sem efeito de quique.
Mova-o só visualmente, sem deslocar o layout ao redor, e mostre o mesmo efeito no foco do teclado.

Ao passar o mouse, uma seta ou o próprio elemento desliza alguns pixels para a frente ou para trás.

Adicione um efeito de hover "Nudge Forward / Backward" (também chamado arrow nudge) em [onde].
A seta deve deslizar um pouco na direção para a qual aponta enquanto o ponteiro estiver sobre o elemento, e voltar quando ele sair: rápido e curto.
Mova só a seta, sem deslocar o texto nem o layout, e mostre o mesmo efeito no foco do teclado.

Os cards vizinhos ficam desfocados e escurecidos enquanto o card sob o mouse continua nítido.

Adicione um efeito "Focus Cards" (também chamado blur siblings on hover, hover focus blur ou card hover effect) em [onde].
Enquanto o ponteiro estiver sobre um card, os outros devem desfocar, escurecer e encolher um pouco enquanto o card sob o ponteiro continua nítido, tudo com uma transição suave que se desfaz quando o ponteiro sai.
Aplique o mesmo destaque no foco do teclado e mantenha todos os cards nítidos e legíveis quando nenhum estiver sob o ponteiro.

Um halo de luz colorida aparece ao redor do elemento ao passar o mouse.

Adicione um efeito de hover "Glow" (também chamado neon glow) em [onde].
Um halo colorido suave deve surgir ao redor do elemento enquanto o ponteiro estiver sobre ele e sumir quando sair: delicado, sem movimento.
Não deixe o halo afetar o layout e mostre o mesmo efeito no foco do teclado.

O elemento aumenta um pouco, de forma suave, quando o ponteiro está sobre ele.

Adicione um efeito de hover "Grow" (também chamado scale up) em [onde].
O elemento deve aumentar um pouco, de forma suave, enquanto o ponteiro estiver sobre ele, e voltar ao tamanho quando sair: rápido e sutil.
Evite que o layout ao redor se desloque e mostre o mesmo efeito no foco do teclado.