悬停效果导致页脚随尺寸调整

Question

我已经成功地为社交媒体图标、Facebook、Linkedin 和 Gihub 应用了悬停发光效果，这就是我想要的。

我遇到的问题是，当您将鼠标悬停在图像上时，它会放大，但放大也会扩展页脚的底部，这不是我想要的。

最终结果应该是，当我将鼠标悬停在图像上时，图像尺寸会随着发光效果而增大，但不会影响页脚底部也随尺寸扩展。

请仅查看页脚的代码，因为这是我正在重点修复的内容：

HTML

  <footer class="footer">
        <h2 id="contact">Social Media</h2>
        <div id="social-icons">
            <ul>
                <a href="https://www.linkedin.com/in/sheldon-aldridge-bb05a1b0/" target="_blank">
    
                    <img src="images/linkedin.png" alt="Sheldon Aldridge linkedin">
                </a>
                <a  href="https://www.facebook.com/sheldon.aldridge.5/" target="_blank">
    
                    <img src="images/Facebook.svg" alt="Sheldon Aldridge linkedin">
                </a>
                <a href="https://github.com/SheldonAldridge" target="_blank">
    
                    <img class="icons" src="images/github.svg" alt="Sheldon Aldridge Github icon">
                </a>
            </ul>
        </div>
    </footer>

CSS

footer {
  box-shadow: 0px -10px 20px 0px black;
  background-image: linear-gradient(to right, #457B9D, #1D3557);
  text-align: center;
  margin-top: 16px;
  padding-bottom: 5rem;
}

.footer img {
  margin-right: 38px;
}

.footer h2 {
  background-color: #1D3557;
  margin: -11px;
  padding: 39px;
  margin-top: 0px;
  margin-right: 19px;
  color: white;
}

.footer img {
  width: 50px;
  border-radius: 100%;
}

#social-icons
{
 display: inline-flex;
 flex-direction: column;
}

#social-icons img
{
 width:3rem;
}

#social-icons img:hover {
  width: 60px;
  box-shadow: 0 0 20px 5px #4d97ff;
  border-radius: 100%;
}

如果您需要其余代码，我将编辑 post 并更新它。

Answer 1

因为您在悬停时增加了图像的 width，这会导致 height 增加，结果扩展了底部。

我建议使用 transform: scale(..) 而不是 width。

例如，

#social-icons img:hover {
  transform: scale(1.3);
  box-shadow: 0 0 20px 5px #4d97ff;
  border-radius: 100%;
}

Fiddle: https://jsfiddle.net/kongallis/ykbsjpwd/18/

悬停效果导致页脚随尺寸调整

Hover effect causing footer to adjust with size

html

css

footer