Search code examples
htmlcssscale

CSS - "Hover to Scale" disturb position of Other DIVs

My question is, why position of Div changes when the link-button scales? And How to avoid this?

.link-button {
  display: inline-block;
  box-sizing: content-box;
  cursor: pointer;
  padding: 15px;
  overflow: hidden;
  border: 1px solid #018dc4;
  font: normal normal bold 1em/normal Arial Black;
  color: rgba(255,255,255,0.9);
  text-align: center;
  background: #12d27c;
}

.link-button:hover {
  padding: 17px 27px;
}

div{
  background: blue;
  color: #fff;
  margin: 10px 0px;
}
<a href"#" class="link-button">Lorem</a>
<div>
Lorem Ipsum
</div>

Solution

  • Instead of changing the padding on hover, change the transform property, like so. This property is not going to change the actual height of your element, and thus not moving the div below.

    .link-button:hover {
  transform: scale(1.3);
}

    And if you want to only change the horizontal scale, use 

    transform:scaleX(yourvalue);