Bouton poussé vers le bas par une transition

Question

Je rencontre des problèmes avec deux éléments de liste auxquels une transition est appliquée. Lorsque vous passez la souris sur l'un d'entre eux, il se développe pour révéler plus d'informations, mais repousse l'autre élément.

Cela se produit uniquement lorsque overflow:hidden est ajouté. Enlevez cela et tout se passe comme prévu. Voici mon jsfiddle https://jsfiddle.net/0g9mttdm/1/ Merci.

.homepage-buttons { 
 
    width: 100%; 
 
    margin: -100px 0; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
} 
 

 
.homepage-buttons ul { 
 
    list-style-type: none; 
 
} 
 

 
.homepage-buttons ul li { 
 
    display: inline-block; 
 
    margin: 0 -2px; 
 
    border: 1px solid #9DBC43; 
 
    padding: 15px; 
 
    width: 25%; 
 
    height: 170px; 
 
    background: transparent; 
 
    transition: width 1s, height 1s linear 0.5s; 
 
    overflow: hidden; 
 
} 
 

 
.homepage-buttons ul li:hover { 
 
    width: 450px; 
 
    height: 450px; 
 
} 
 

 
.fa-users, 
 
.fa-briefcase { 
 
    color: #9DBC43; 
 
} 
 

 
.btn-circle.btn-xl { 
 
    position: relative; 
 
    z-index: 30; 
 
    width: 150px; 
 
    height: 150px; 
 
    padding: 10px 16px; 
 
    line-height: 1.33; 
 
    border-radius: 100px; 
 
    font-size: 28px; 
 
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.8); 
 
} 
 

 
.btn-default { 
 
    background-color: #4E545F; 
 
    border: 10px solid #9DBC43; 
 
    color: #fff; 
 
} 
 

 
.btn-default:hover { 
 
    background-color: #4A6400; 
 
    border: 10px solid #4A6400; 
 
    color: #fff; 
 
    transform: scale(1.1); 
 
} 
 

 
.btn-primary { 
 
    background-color: #4E545F; 
 
    border: 10px solid #9DBC43; 
 
    color: #fff; 
 
} 
 

 
.btn-primary:hover { 
 
    background-color: #004435; 
 
    border: 10px solid #004435; 
 
    color: #fff; 
 
    transform: scale(1.1); 
 
}

<div class="homepage-buttons"> 
 
    <ul> 
 
    <li><button class="btn btn-default btn-circle btn-xl" type="button"><i class="fa fa-users" aria-hidden="true"></i></button><br /> 
 
     <h4>Personal</h4> 
 
     <h5>Hello there</h5> 
 
    </li> 
 
    <li><button class="btn btn-primary btn-circle btn-xl" type="button"><i class="fa fa-briefcase" aria-hidden="true"></i></button><br /> 
 
     <h4>Corporate</h4> 
 
     <h5>Hello there</h5> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

Cela se produit parce que vous les li s sont inline-block et vertical-align est baseline par défaut.

Modification vertical-align: top et vous avez terminé - voir la démo ci-dessous:

.homepage-buttons { 
 
    width: 100%; 
 
    margin: -100px 0; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
} 
 

 
.homepage-buttons ul { 
 
    list-style-type: none; 
 
} 
 

 
.homepage-buttons ul li { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin: 0 -2px; 
 
    border: 1px solid #9DBC43; 
 
    padding: 15px; 
 
    width: 25%; 
 
    height: 170px; 
 
    background: transparent; 
 
    transition: width 1s, height 1s linear 0.5s; 
 
    overflow: hidden; 
 
} 
 

 
.homepage-buttons ul li:hover { 
 
    width: 450px; 
 
    height: 450px; 
 
} 
 

 
.fa-users, 
 
.fa-briefcase { 
 
    color: #9DBC43; 
 
} 
 

 
.btn-circle.btn-xl { 
 
    position: relative; 
 
    z-index: 30; 
 
    width: 150px; 
 
    height: 150px; 
 
    padding: 10px 16px; 
 
    line-height: 1.33; 
 
    border-radius: 100px; 
 
    font-size: 28px; 
 
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.8); 
 
} 
 

 
.btn-default { 
 
    background-color: #4E545F; 
 
    border: 10px solid #9DBC43; 
 
    color: #fff; 
 
} 
 

 
.btn-default:hover { 
 
    background-color: #4A6400; 
 
    border: 10px solid #4A6400; 
 
    color: #fff; 
 
    transform: scale(1.1); 
 
} 
 

 
.btn-primary { 
 
    background-color: #4E545F; 
 
    border: 10px solid #9DBC43; 
 
    color: #fff; 
 
} 
 

 
.btn-primary:hover { 
 
    background-color: #004435; 
 
    border: 10px solid #004435; 
 
    color: #fff; 
 
    transform: scale(1.1); 
 
}

<div class="homepage-buttons"> 
 
    <ul> 
 
    <li><button class="btn btn-default btn-circle btn-xl" type="button"><i class="fa fa-users" aria-hidden="true"></i></button><br /> 
 
     <h4>Personal</h4> 
 
     <h5>Hello there</h5> 
 
    </li> 
 
    <li><button class="btn btn-primary btn-circle btn-xl" type="button"><i class="fa fa-briefcase" aria-hidden="true"></i></button><br /> 
 
     <h4>Corporate</h4> 
 
     <h5>Hello there</h5> 
 
    </li> 
 
    </ul> 
 
</div>