'Text moves when hovering

Every time I hover over social bar and it gets bigger , headers moves down some pixels. I know it's because of the margin, but I don't know how to fix it. CSS code:

.socialbar {
  /* color: white; */
  background: pink; /* added by community for better display */
  display: flex;
  justify-content: center;
}

.socialbar img {
  width: 50px;
  height: auto;
  margin-top: 60px;
  margin-left: 16px;
  margin-right: 16px;
  transition: 0.3s;
}

.socialbar img:hover {
  width: 65px;
  height: auto;
  .headers {
    color: white;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    justify-content: center;
    margin-top: 200px;
  }
<div class="socialbar">
  <a class="magic_eden" href=""><img src="https://i.imgur.com/57ypMsv.png"></a>
  <a class="discord" href=""><img src="https://i.imgur.com/YFeIsm8.png"></a>
  <a class="twitter" href=""><img src="https://i.imgur.com/ft9IJP1.png"></a>
</div>

<div class="headers">
  <span class="header_one">
      About
  </span>
</div>
htmlcssimagehovermargin


Solution 1:[1]

It's not because of any margin, but because you are applying a different (wider) width to the images on hover, and so their autmatically calculated height will change proportionally with that.

Instead of using a different width for hover, try transform: scale(1.05) or any value you prefer.

.socialbar {
  /* color: white; */
  background: pink;
  /* added by community for better display */
  display: flex;
  justify-content: center;
}

.socialbar img {
  width: 50px;
  height: auto;
  margin-top: 60px;
  margin-left: 16px;
  margin-right: 16px;
  transition: 0.3s;
}

.socialbar img:hover {
  transform: scale(1.2);
}

.headers {
  color: white;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  justify-content: center;
  margin-top: 200px;
}
<div class="socialbar">
  <a class="magic_eden" href=""><img src="https://i.imgur.com/57ypMsv.png"></a>
  <a class="discord" href=""><img src="https://i.imgur.com/YFeIsm8.png"></a>
  <a class="twitter" href=""><img src="https://i.imgur.com/ft9IJP1.png"></a>
</div>

<div class="headers">
  <span class="header_one">
      About
  </span>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions