---
# System prepended metadata

title: "\U0001F3C5 Day 39 - 第八週卡片 hover 縮放效果"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 Day 39 - 第八週卡片 hover 縮放效果

今天我們要來實作[設計稿](https://www.figma.com/design/3bEeuchVUYwmA2PuHAxQVN/%E5%85%AD%E8%A7%92%EF%BD%9CZOBAA--%E6%97%85%E9%81%8A%E7%B6%B2%E7%AB%99--student-ver.%EF%BC%89?node-id=187-43309&t=1AAAxui69xyradgN-0)中，首頁卡片 hover 時改變寬度並顯示下方按鈕的功能。
![image](https://hackmd.io/_uploads/rycjW-b8xg.png)

- 卡片寬度做法：先對卡片設定 `max-width: 416px` 賦予最大寬度限制，再加上 `width: 65%` 作為卡片預設寬度，hover 時再將寬度轉為 100% 來改變卡片寬度。
- 按鈕做法：將預設高度設為 `height: 0`、透明度 `opacity: 0`，hover 時再調整對應樣式來顯示按鈕。

### 題目
請使用此 [CodePen 範本](https://codepen.io/fhljksmg-the-styleful/pen/KwdweaR?editors=1100)，在 CSS 區塊的 hover 部份加上對應設定，完成卡片 hover 縮放效果。

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：https://codepen.io/fhljksmg-the-styleful/pen/myeyxzz?editors=1100
-->




回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 01 | Nooooora |[Codepen](https://codepen.io/Nora-Ch/pen/ogjwGpr?editors=1100)|
|  02  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/OPygxxX) |
|  03  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/GgpEMWJ?editors=1100) |
|  04  |  Chia__ |[Codepen]([連結](https://codepen.io/Chia-the-encoder/pen/NPGgaEa)) |
|  05  |  登登登  |[Codepen](https://codepen.io/Duncanin/pen/JoYJOGo) |
|  06  |  ja4071  |[Codepen](https://codepen.io/SHAO-L/pen/VYvWrPm) |
|  07  |  地瓜  |[Codepen](https://codepen.io/ChippyYU/pen/NPGgwYO?editors=1100) |
|  08  |  老屠  |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/vENZpxa?editors=1100) |
|  09  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/EaVXQwd?editors=1100) |
|  10  |  Pastor  |[Codepen](https://codepen.io/peter_hung/pen/empRVxP) |
|  11  |  平平  |[Codepen](https://codepen.io/ypinpin/pen/XJmgEMv) |
|  12  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=zxvzjOB) |
|  13  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/xbwrjQY) | 
|  14  |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/yyYXRPp?editors=1100) | 
|  15  |  cks40660  |[Codepen](https://codepen.io/CKS40660/pen/MYavgYm) |
|  16  |  Min  |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/empEOGM?editors=1100) |
|  17  |  Sam.S.T.Y  |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/GgpvjZG?editors=1100) | 
|  18  |  7lun  |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/QwjMKey?editors=1100) |
|  19  |  Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/bNVrBPR?editors=0100) | 
|  20  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/raOzJzp) | 
|  21  |  Hugh  |[Codepen](https://codepen.io/Hugh-Chen/pen/zxvaoEb?editors=1100) | 
|  22  |  KOMATSU PEI  |[Codepen](https://codepen.io/Komatsu2021/pen/QwjMbRO?editors=1100) | 
|  23  |  伊迪  |[Codepen](https://codepen.io/fhljksmg-the-styleful/pen/myeyxzz?editors=1100) |
|  24  |  Chris Wang  |[Codepen](https://codepen.io/Wang-Chris/pen/xbwQabK) |
|  25  |  Rogan  |[Codepen](https://codepen.io/RoganHsu/pen/LEpqNgO?editors=1100) |
|  26  |  NGNLzenos  |[Codepen](https://codepen.io/hzpjunua-the-bashful/pen/pvggOPP?editors=1100) |
|  27  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/MYyMJaQ?editors=1100) |

-- 快速複製 -->
<!-- |  排序  |  姓名  |[Codepen](連結) | -->