当鼠标悬停效果在图像上时，段落向上移动

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);
}