トランジションによってボタンが押し下げられる

Question

トランジションが適用された2つのリスト項目に問題があります。それらのいずれかの上にマウスを置くと、それが拡大してより多くの情報が表示されますが、他の項目は押し下げられます。

これは、overflow:hiddenが追加された場合にのみ発生します。それを取り除くと、すべてが期待通りに機能します。ここに私のjsfiddleですhttps://jsfiddle.net/0g9mttdm/1/ありがとう。あなたli sがinline-blockあるとvertical-alignはデフォルトでbaselineあるので、たまたま

.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

。

vertical-align: topに変更し、あなたが行われている - のデモ以下を参照してください：

.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>