這篇文章要介紹如何使用 CSS 實現卡片抽出效果，當滑鼠懸停在卡片上時，卡片會略微抬起並顯示出更深的陰影效果

HTML

創建一個容器 card-container，包含多個圖片，每個圖片都被包裹在一個 <div> 元素中

<div class="card-container">
    <div class="card">
        <img src="picture1.jpeg" alt="Image 1">
    </div>
    <div class="card">
        <img src="picture2.png" alt="Image 2">
    </div>
    <div class="card">
        <img src="picture3.jpg" alt="Image 3">
    </div>
    <div class="card">
        <img src="picture4.jpg" alt="Image 4">
    </div>
</div>

CSS

1. 設定頁面樣式

使用 Flexbox 將頁面內容居中顯示，確保圖片位於畫面正中間

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

2. 卡片容器樣式

.card-container {
    display: flex;
    gap: 20px; 
}

.card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    width: 200px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; 
}

• gap : 設置卡片之間的間距
• border-radius : 設置卡片的圓角邊框
• box-shadow : 為卡片添加陰影效果，讓卡片更具立體感
• transition : 為卡片的變形（transform）和陰影（box-shadow）添加平滑的過渡效果
• overflow : 隱藏超出卡片邊界的內容，確保卡片外觀整潔

3. 圖片樣式

.card img {
    width: 100%;
    border-radius: 8px 8px 0 0; 
}

• border-radius : 將圖片的上方設置為圓角，保持與卡片一致的圓角設計

4. 卡片懸停效果

.card:hover {
    transform: translateY(-30px); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
}

• translateY: 將卡片在垂直方向上抬起 30 像素，創造抽出的效果
• box-shadow : 增加陰影的深度，讓卡片看起來更加立體

結果呈現