---
# System prepended metadata

title: 稀飯版 Day 2
tags: [Layout, CSS, HTML]

---

# 稀飯版 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