Hover effect causing footer to adjust with size-CodePudding

I have managed to apply the social media icons, Facebook, Linkedin and Gihub with a hover glow effect, which is what I want.

The issue I am having when you hover over the images it sizes up, but the sizing up also extends the bottom of the footer which is not what I want.

The end result should be that when I hover over the images the image size increases with the glow effect, but does not affect the bottom of the footer from expanding with the size as well.

Please see the code for the footer only as that is what I am focusing on fixing:

HTML

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

If you need the rest of the code, I will edit the post and update it.

CodePudding user response：

Because you increase the width of image on hover, this creates an increase on height, and as a result this extends the bottom.

I would suggest to use transform: scale(..) instead of width.

For example,

#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/