# 稀飯版 Day 2 Date: 2024/10/02 ### [CSScoke](https://youtu.be/IocyLERRdko) ![互動圖文卡片](https://i.imgur.com/iblry3p.png) ```html <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100,500&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="wrap"> <div class="item"> <img src="https://picsum.photos/500/400?random=10" alt="" /> <div class="txt"> <h2>金魚都能懂得這個網頁畫面怎麼切 : 互動圖文卡片</h2> <p> 互動圖文卡片是我們在網頁中經常見到的另一種稀飯版，不會切你就遜掉囉。 </p> </div> </div> <div class="item"> <img src="https://picsum.photos/500/400?random=20" alt="" /> <div class="txt"> <h2> 稀飯版都不會切你怎麼轉職？來我的網頁暴力班，保證讓你邊痛邊學會 </h2> <p> 把技能學好是需要一點點痛一點點爽一點點過癮跟一點點暴力，不信你來報名試試看阿！ </p> </div> </div> <div class="item"> <img src="https://picsum.photos/500/400?random=30" alt="" /> <div class="txt"> <h2> 不知道你有沒有聽過網頁的都市傳說，絕對不要相信沒有驗證過的謠言 </h2> <p> 網頁的都市傳說很多種，其中一種較做兒子絕對定為老爸就要相對定位，這啥鬼？ </p> </div> </div> <div class="item"> <img src="https://picsum.photos/500/400?random=40" alt="" /> <div class="txt"> <h2>買線上課程前停個幾秒想想，還是先把免費的金魚教學先練一練吧</h2> <p> 買了不會看，那不如來看免錢的，縱使不看也不會有罪惡感，更不會心痛阿。 </p> </div> </div> </div> </body> </html> ``` ```css /* style.css */ /************************* Main Starts **************************/ * { margin: 0; padding: 0; list-style: none; font-family: "Noto Sans TC", sans-serif; } .wrap { width: 100%; display: flex; } .item { width: 25%; position: relative; } .item img { width: 100%; vertical-align: middle; } .item .txt { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 20px; background-color: rgba(0, 0, 0, 0.6); /* 垂直居中 */ display: flex; flex-direction: column; justify-content: center; /* 一開始先透明 */ opacity: 0; transition: 0.5s; } /* 習慣：父層被摸到，子層做事情 */ .item:hover .txt { opacity: 1; cursor: pointer; /* Rogelio: 感覺可以點進去 */ } .item .txt h2 { font-size: 28px; color: #ff0; font-size: 500; } /* 加碼：hover 時會有神奇線條在標題下方延長 */ /* Rogelio: 很明顯這裡要用 pseudo element 做 */ .item h2::after { content: ''; display: block; width: 0%; height: 2px; margin: 10px 0; background-color: #ff0; transition: width .5s .3s; } .item:hover h2::after { width: 100%; } .item .txt p { font-size: 18px; color: #fff; font-size: 100; } /************************* Main Ends **************************/ ``` ### My Practice