Абзац сдвигается, когда на изображении появляется эффект наведения мыши

Question

Я делаю сайт для школьного проекта.Я сделал 3 кнопки социальных сетей с изменением размера во время парения.Однако абзац над этими кнопками меняет положение, когда они становятся больше по размеру.Есть ли способ, чтобы мой абзац остался прежним и не двигался, даже когда мои изображения становятся больше?

<div class="maptexte">
            <p>Avez-vous besoin d'aide? Voulez-vous laisser un commentaire? Contactez-nous en tout temps grâce aux
                adresses mentionnées ci-dessous</p>
            <p>Adresse: 5505 Boul St-Laurent #2000, Montréal, QC H2T 1S6</p>
            <p>Téléphone: (514) 490-2000</p>

            <div class="sociaux">
                <div class="icones">
                <a href=""><img id="facebook" src="images/facebook.png"></a>
                <a href=""><img id="insta" src="images/insta.png" alt="ig"></a>
                <a href=""><img id="twitter" src="images/twitter.png" alt="tw"></a>
                </div>
            </div>
        </div>
</html>


#facebook:hover {
    width: 65px;
    height: 65px;
}

#insta:hover {
    width: 65px;
    height: 65px;
}

#twitter:hover {
    width: 65px;
    height: 65px;
}

Answer 1

Вы можете использовать transform свойство:

#facebook:hover {
    transform: scale(1.2);
}