Criei uma animação simples para quando o usuário interage com as imagens das secções, combinando a pseudo class :hover com a propriedade transform e transitionpassando os valores translate3d e scale.
veja no código:
.secondario__imagem {
transition: .3s;
}
.secondario__imagem:hover {
transform: translate3d(0, -10px, 0) scale(1.01);
transition: .3s;
}Breve explicação
As transições permitem definir a transição entre dois estados de um elemento. No código de exemplo usamos essa propriedade para suavizar a nossa animação, sem ela a transformação de um estado para o outro ficaria muita rápida e brusca.
A propriedade CSS transform permite girar, dimensionar, inclinar ou traduzir um elemento. No nosso caso usamos com o translate3d para deslocar a imagem -10px no eixo Y ou seja na vertical, portanto on mouse hover teremos como resultado uma movimentação da imagem de 10px para cima do ponto inicial.
A função CSS scale define uma transformação que redimensiona um elemento no plano 2D. Neste caso usamos para aumentar a nossa imagem, imagina um efeito de zoom-in.
