Expandindo uma Div a partir de seu centro usando CSS

No reino das transformações CSS, pode-se imaginar elementos div expandindo graciosamente a partir de seu eixo central , em vez do comportamento padrão de expansão a partir do canto superior e esquerdo. No entanto, esse efeito desejado representa um desafio sem JavaScript.

A solução: manipulando margens

A chave para alcançar essa expansão centrada está na transição das margens do div usando um específico fórmula. A técnica envolve calcular a diferença entre o tamanho alvo e o tamanho inicial e dividir o resultado por dois. Esse valor é então aplicado como um ajuste de margem negativo durante a transição.

Opções de personalização:

Dependendo do comportamento desejado, três opções principais estão disponíveis:

Opção 1: preservando o espaço

Esta opção expande o div dentro do espaço reservado ao seu redor, deixando os elementos circundantes não afetado.

#square {
    -webkit-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    margin: 55px; /* calculated as initial margin - ((width change and height change)/2) */
}

Opção 2: Substituindo elementos circundantes

Ao definir margens negativas, esta opção faz com que o div se expanda sobre elementos próximos, sobrepondo seu conteúdo.

#square {
    -webkit-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    margin: -50px; /* calculated as 0 - ((width change and height change)/2) */
}

Opção 3: deslocamento dos elementos circundantes

Esta variação desloca o div e move os elementos subsequentes para baixo no fluxo do documento.

#square {
    -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
    transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
#square:hover {
    top: -50px; /* calculated as initial top - ((new height - initial height)/2) */
    left: -50px; /* calculated as initial left - ((new width - initial width)/2) */
    margin-right: -50px;
    margin-bottom: -50px;
}

Observação: Esses cálculos se aplicam a divs quadrados. Para elementos não quadrados, os cálculos para ajustes de margem podem variar um pouco dependendo do redimensionamento proporcional desejado.