Как запретить родителю изменять размеры при наведении дочернего элемента, который меняет его (дочерний) размер? ⇐ CSS

[Anonymous]

Для справки: попытка воспроизвести этот эффект закрепления на веб-сайте агентства Different By Design:
[img]https:// i.sstatic.net/cWx0pHpg.png[/img]

Прямо сейчас у меня есть док:

Код: Выделить всё

А вот CSS:

Код: Выделить всё

#dock > div > svg:hover {
transform: translateY(-15%);
height: 7vw;
width: 7vw;
transition: transform .1s ease-in-out, height .1s ease-in-out, width .1s ease-in-out;
}

Поскольку #dock > div > svg:hover изменяет высоту и ширину рассматриваемого SVG, он расширяет #dock. Я бы хотел, чтобы размер закрепления оставался таким же, как в примере ссылки вверху.
Я пробовал сделать :hover do Position: Absolute< /code>, но это просто приводит к тому, что док его не включает. Я думаю, что мог бы установить ширину/высоту для родительского элемента, однако я не уверен, как это сделать или как вычислить правильные числа, чтобы он был динамическим.

Подробнее здесь: https://stackoverflow.com/questions/785 ... nges-its-t