Expandiendo un Div desde su centro usando CSS

En el ámbito de las transformaciones CSS, uno podría imaginar elementos div expandiéndose con gracia desde su eje central , en lugar del comportamiento predeterminado de expandirse desde las esquinas superior e izquierda. Sin embargo, este efecto deseado presenta un desafío sin JavaScript.

La solución: manipular márgenes

La clave para lograr esta expansión centrada radica en la transición de los márgenes del div utilizando un fórmula. La técnica consiste en calcular la diferencia entre el tamaño objetivo y el tamaño inicial y dividir el resultado por dos. Este valor luego se aplica como un ajuste de margen negativo durante la transición.

Opciones de personalización:

Dependiendo del comportamiento deseado, hay tres opciones principales disponibles:

Opción 1: Preservar el espacio

Esta opción expande el div dentro del espacio reservado a su alrededor, sin afectar los elementos circundantes.

#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) */
}

Opción 2: Anular elementos circundantes

Al establecer márgenes negativos, esta opción hace que el div se expanda sobre elementos cercanos, superponiendo su contenido.

#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) */
}

Opción 3: cambiar los elementos circundantes

Esta variación desplaza el div y mueve los elementos posteriores hacia abajo en el flujo del 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;
}

Nota: Estos cálculos se aplican a divs cuadrados. Para elementos que no son cuadrados, los cálculos para los ajustes de margen pueden variar ligeramente según el cambio de tamaño proporcional deseado.