CODEWITHSUNDEEP
htmlcssborder
MMJ
MMJ

Reputation: 309

Adding border on hover shifts surrounding elements

Just hover on 'a headline' in the snippet below and you will see how elements are moving. Why?

There's no margin .. And they're only moving when I add border to the inline-block element. Try to add more border width in section.twelve a like: 

section.twelve a {
        border-bottom: 10px solid #FFFAFF;
    }

But if you remove the border everything's fine.. Why is this behavior ? and is it only for border?

I just want to add any styles to the element without effecting the others.

section{
    position: relative;
    height: 300px;
    padding: 15px 80px;
    z-index: 1;
}

section h1{
    font-size:3em;
    font-weight: 100;
    line-height: 1.3;
 
}

section a {
    position: relative;
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    vertical-align: bottom;
}

section.twelve {
    background: #121A5A;
    color: #FFFAFF;
}
section.twelve a {
    color:#D8315B;
    font-weight: 700;
    overflow: hidden;
    padding: 0px 5px;
    transition all 0.2s ease;
    border-bottom: 5px solid #FFFAFF;
}

.twelve a:before{
    content: "";
    top:0; left: 0;
    position: absolute;
    width:100%; height: 100%;
    background: #FFFAFF;
    z-index: -1;
    transition: all 0.2s ease;
    transform: translateX(100%);
}
.twelve a:hover::before {
    transform: translateX(-95%);
    background: #D8315B;
}
.twelve a:hover{
    color: #FFFAFF;
    transform: translateX(5px);
    border-bottom: 1px solid #FFFAFF;
}
<section class="twelve">
        <h1>Write <a href="#">a headline</a> that makes people do kind of a double take whenthey read it.</h1>
    </section>

Upvotes: 1

Views: 4661

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371221

When you add, or change the width, of a border, that changes the size of the element. Hence, by adding the border on hover, the box grows to occupy more space, which naturally shifts the position of surrounding text / elements.

One method to resolve this issue is to always have the border present, so the size of the box is fixed. When the border shouldn't be visible, it's transparent.

Here's an example:

section {
  position: relative;
  height: 300px;
  padding: 15px 80px;
  z-index: 1;
}
section h1 {
  font-size: 3em;
  font-weight: 100;
  line-height: 1.3;
}
section a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  vertical-align: bottom;
}
section.twelve {
  background: #121A5A;
  color: #FFFAFF;
}
section.twelve a {
  color: #D8315B;
  font-weight: 700;
  overflow: hidden;
  padding: 0px 5px;
  transition all 0.2s ease;
  border-bottom: 5px solid transparent;   /* ADJUSTMENT */
}
.twelve a:before {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #FFFAFF;
  z-index: -1;
  transition: all 0.2s ease;
  transform: translateX(100%);
}
.twelve a:hover::before {
  transform: translateX(-95%);
  background: #D8315B;
}
.twelve a:hover {
  color: #FFFAFF;
  transform: translateX(5px);
  border-bottom: 5px solid white;       /* ADJUSED */
}
<section class="twelve">
  <h1>Write <a href="#">a headline</a> that makes people do kind of a double take whenthey read it.</h1>
</section>

Upvotes: 8

br3t
br3t

Reputation: 1658

Yes, on hover you are changing element's border, so, element's total height also changes

Upvotes: 1

Related Questions