При использовании :hover (увеличивает блок), как избежать сдвиг соседних блоков?

Question

[Дима]

При наведении на иконки (twitter,facebook,linkedin), они должны увеличиваться, через :hover. Проблема в том, что при срабатывании :hover сдвигаются соседние элементы. Как решается такая ситуация?
https://codepen.io/Fed72/pen/dyWNePd

<nav>

        <div class="label">
            <span>D.F.</span>
        </div>

        <div class="nav">
            <div>
                <span >About me</span>
            </div>
            <div>
                <span >Skills</span>
            </div>
            <div>
                <span >Portfolio</span>
            </div>
            <div>
                <span >Blog</span>
            </div>
            <div>
                <span >Contact me</span>
            </div>
            <div id="hr">
                <hr noshade>
            </div>

            <div id="nav__img" class="nav__img">
                <div>
                    <a href=""> <img src="https://cdn.icon-icons.com/icons2/1294/PNG/512/2362131-media-social-topic-trend-tweet-twitt_85525.png" alt="twitter_icon"> </a>
                </div>
                <div>
                    <a href="https://www.facebook.com/dima.fedechkin.5"> <img
                            src="https://cdn.icon-icons.com/icons2/1294/PNG/512/2362129-facebook-fb-friends-social_85524.png" alt="facebook_icon"> </a>
                </div>
                <div>
                    <a href="https://www.linkedin.com/in/fed-dim-b26744213/"> <img
                            src="https://cdn.icon-icons.com/icons2/2201/PNG/512/linkedin_logo_square_icon_134016.png" alt="linkedin_icon"> </a>
                </div>
            </div>
        </div>
    </nav>

hr {
    background-color: white;
    height: 55px; 
    width: 2px;
    border-width: 0;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-shadow: 2px 0px 16px 2px rgb(169 169 169);
    width: 100%;
    height: 140px;
    background-color: rgb(212 212 212);
}

.label {
    display: flex;
    align-items: center;
}

.label span {
    color: rgb(188 188 188);
    font-size: 100px;
    font-family: 'Monoton', cursive;
}

.nav {
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    border-radius: 10px;
    box-shadow: 6px 6px 9px -2px rgb(152 150 150 / 85%);
    width: 52%;
    height: 80px;
}

.nav div, .nav div > span {
    display: flex;
    align-items: center;
}

.nav > div > span {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-size: 21px;
    color: white;
    transition: opacity .2s linear;
    cursor: pointer;
}

.nav > div > span:after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 100px;

    background-color: #cef8f8;
    opacity: 0;

    position: absolute;
    top: 106%;
    left: 0;
    z-index: 1;

    transition: opacity .2s linear;
}

.nav > div > span:hover:after {
    opacity: 1;
}

.nav__img img {
    display: flex;
    width: 64px;
    margin-top: 2px;
}

.nav__img img:hover {
    width: 72px;
    transition-timing-function: linear;
    transition-duration: 0.15s;
}

Answer 1

[Егор Живагин]

1 - Не менять ширину, а использовать transform: scale
2 - Добавлять элементам position: absolute (а родителям фиксировать ширину и position: relative)

Comments

[Дима]

первый пункт сделал, что было необходимо, спасибо!
Добавлять элементам position: absolute (а родителям фиксировать ширину и position: relative). В моей ситуации это будет лишним. Уже основная часть CSS готова, вплоть до мобильной версии.
Сейчас только добавление эффектов.