我正試圖為我公司的領導層創建一個包含個人簡歷的圖庫頁面。目標是將領導人的形象和名字放在兩列卡片上，當用戶將鼠標懸停在卡片上時，卡片會展開，顯示領導人的簡歷。

目前，左欄中的卡片工作正常，堆疊中它們之后的卡片向右下移動，為擴展的卡片騰出空間。然而，左欄中的卡片向下移動到下一行，這將卡片從光標處移開，因此當它試圖在懸停和非懸停狀態之間來回跳躍時，就會出現這種抖動。此外，理想情況下，當用戶將鼠標懸停在右側的卡片上時，左側的卡片應該向下移動。下面是我正在處理的代碼:

<div class='column'>
    <!-- content -->
</div>

<div class='column'>
    <!-- content -->
</div>

<div class='column'>
    <!-- content -->
</div>

<div class='column'>
    <!-- content -->
</div>

<style>
.column {
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    transition: 0.3s;
}

.column:hover {
    flex: 0 0 100%;
    max-width: 100%;
}
</style>

我最初是在使用網格柱，試圖在hover上將col-lg-6轉換為col-lg-12或其他東西，但它變得復雜而丑陋，我最終使用了這個解決方案，它大約是我需要的方式的73.6%。我的假設是，我需要有兩個類，右列和左列，并稍微不同地操縱它們，但我對這種東西相當陌生，我不確定最好的方法是什么。提前感謝！