### 題目

在卡片 hover 時讓背景產生透明度

hover 時，呈現如下：

<img src="https://hackmd.io/_uploads/BkLcChdnh.png" width="300">

HTML

<ol class="list-unstyled d-flex">
  <li class="col-6 col-lg-3">
    <a href="#" class="card border-0 rounded-0">
      <h4 class="font-Shrikhand italic text-white d-flex flex-column align-items-center fs-24 fs-md-32 mb-18 mb-md-80">
        <span class="font-Saira fs-m fs-md-l fw-light mb-16 mb-md-20">4</span>
        Vito
      </h4>
      <div class="d-flex flex-column flex-xl-row align-items-xl-end justify-content-between">
        <div class="text-white">
          <h5 class="h6 fw-bold mb-0">情感型</h5>
          <p class="mb-0">情感識別/心情分析/心靈支持</p>
        </div>
        <img src="https://hackmd.io/_uploads/ByjLe2_3h.png" alt="arrow" class="img-fluid">
      </div>
    </a>
  </li>
</ol>

CSS

body {
  font-family: 'Noto Sans TC', sans-serif;
}

a {
  display: block;
  text-decoration: none;
}

.font-Shrikhand {
  font-family: 'Shrikhand', cursive;
}

.font-Saira {
  font-family: 'Saira Extra Condensed', sans-serif;
}

.fs-24 {
  font-size: 24px;
}

.fs-md-32 {
  @media (min-width: 768px) {
    font-size: 32px;
  }
}

.fs-m {
  font-size: 128px;
}

.fs-md-l {
  @media (min-width: 768px) {
    font-size: 400px;
  }
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-18 {
  margin-bottom: 18px;
}

.mb-md-20 {
  @media (min-width: 768px) {
    margin-bottom: 20px;
  }
}

.mb-md-80 {
  @media (min-width: 768px) {
    margin-bottom: 80px;
  }
}

.card {
  padding: 24px 12px;
  background-color: #000;
  background-blend-mode: darken;
  background-image: url(https://github.com/hexschool/2022-web-layout-training/blob/main/week8-ai/vito.png?raw=true);
  background-size: cover;
  background-position: center;
  transition: all 1s;
  @media (min-width: 768px) {
    padding: 24px 40px 56px;
  }
  &:hover {
    background-color: ...;
  }
}

> 提示：[rgb()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb)
>
> 補充：
> - [background-blend-mode](https://www.casper.tw/css/2016/01/10/css-blend-mode/)
>
> 文字大小、間距實作時可以直接調整 Bootstrap 變數設定

## 回報流程

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


<!-- 解答：
https://codepen.io/hexschool/pen/WNYVPqV
-->

回報區
---

|#| Discord | CodePen / 答案 |
|:-:|:-----------------:|:-------------------------------------------------------------------:|
|01|Berlin|[CodePen](https://codepen.io/3qberlin/pen/Jjwdmbw)|
|02| 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/poqJxeW) |
| 03| hebin. | [Codepen](https://codepen.io/landyhsiao776/pen/BavNqZL)|
|04| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/QWzbZqg)|
|05| Vic_Liou | [CodePen](https://codepen.io/allenliou-java/pen/ZEVGqer)|
| 06 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/oNJXaeR?editors=1100) |
| 07 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/ZEVGqKx) |
| 08 | Paul#7426 | [Codepen](https://codepen.io/paul-1997/pen/PoXqyyb)|
| 09 | deli0529 | [Codepen](https://codepen.io/delichaomoon/pen/XWobxeP?editors=1100)|
|10| meowmeow | [CodePen](https://codepen.io/snow1224/pen/mdaJzQE)|
| 11 | Renee Wang | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/YzdXJOX) |
| 12 | shcopy | [CodePen](https://codepen.io/shcopy/pen/abPORXr)|
| 13 | Morning | [Codepen](https://codepen.io/sxzjnkxs-the-styleful/pen/BavNGBd?editors=1100) |
| 14 | townyuan | [CodePen](https://codepen.io/townyuan/pen/BavNGaw)|
| 15 | Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/zYyGmQX)
| 16 | ryan_chou | [CodePen](https://codepen.io/csw8524/pen/JjwdmQ)|
| 17 | AYA | [CodePen](https://codepen.io/NoNameNote/pen/OJrVaRO) |
| 18 |Moreene|[CpdePen](https://codepen.io/Moreene/pen/yLGNQeQ)|
| 19 |SmallP|[CpdePen](https://codepen.io/smallp/pen/oNJXQjb)|
| 20 | Tami | [CodePen](https://codepen.io/wqsdqbjn-the-vuer/pen/RwEPqjZ) |
| 21 | jacky7035 | [CodePen](https://codepen.io/adens123/pen/vYvOQdZ) |
|22| pinyi_9 | [CodePen](https://codepen.io/Wpypy/pen/LYMVgXP)|
|23| shuuu | [CodePen](https://codepen.io/afjrvjzl-the-bashful/pen/oNJXQpY?editors=1100)|
| 24 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/ZEVGVBW) |
| 25 | ovo.yun | [CodePen](https://codepen.io/yun-the-scripter/pen/NWeqerZ)|
| 26 | hao2485 | [CodePen](https://codepen.io/Seanfeb16/pen/mdaJajo)|
| 27 | Uli | [CodePen](https://codepen.io/uli1313/pen/YzdXdOR)|
| 28 | ming0712 | [CodePen](https://codepen.io/StevenHuang/pen/jOXPREg)|
| 29 | Tina02 | [CodePen](https://codepen.io/chjitlox-the-bashful/pen/dywoLVe)|
| 30 | hannahTW | [CodePen](https://codepen.io/hangineer/pen/NWeqoVw)|
|41| yunhsinnnnnnn | [CodePen](https://codepen.io/yun___hsin/pen/QWzbeaw?editors=1100)|
|42| soniawu | [CodePen](https://codepen.io/YUJOU/pen/vYvNBVO?editors=1100)|
|43| orias_000 | [CodePen](https://codepen.io/qoq77416416/pen/OJryJWO?editors=1100)|
|44| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/NWeGWvz)|
|45| Yu | [CodePen](https://codepen.io/yuch3n_chen/pen/zYyvYjx)|
|46| JohnChien | [CodePen](https://codepen.io/glqwazid-the-selector/pen/yLGYLrm)|
|47| Atsushi#6888 | [CodePen](https://codepen.io/atsushi-amuro/pen/zYyvNZV?editors=1100)|
|48| lychee_kk | [CodePen](https://codepen.io/kakakala/pen/gOZaYwb)|
|49| runweiting | [CodePen](https://codepen.io/weiting14/pen/MWZaowq)|
|50| 依依 | [CodePen](https://codepen.io/Rita-Yang/pen/poqjpEz)|
|51| wind | [CodePen](https://codepen.io/wind7y/pen/bGOVaqZ)|
|52| kuanju27 | [CodePen](https://codepen.io/Eero-Chiao/pen/yLGYrBW)|
|53| m_m | [CodePen](https://codepen.io/minnn7716/pen/XWoXMXJ)|
| 54 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/bGOErMZ) |
|55| adele6199 | [CodePen](https://codepen.io/codepen-io-winnie/pen/qBLbPaY?editors=1100)|
|56| Kimi | [CodePen](https://codepen.io/kimihu91/pen/abPdMqr)|
|57| .icesam | [CodePen](https://codepen.io/icesam/pen/xxmZNBa)|
|58| rjjq | [CodePen](https://codepen.io/rjjq/pen/jOXrdbR)|
|59| Randy | [CodePen](https://codepen.io/landy510/pen/VwqmMzp?editors=1100)|
|60| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/gOZgpmx)|
|61| RX00#5351 | [CodePen](https://codepen.io/llqzknqv-the-styleful/pen/abPpjdm)|
|62| Long | [CodePen](https://codepen.io/Loonng/pen/oNJZZVO?editors=1100)|
|63| 歐陽龍龍#1061 | [CodePen](https://codepen.io/dizzydog-rgb/pen/YzdVwVJ)|
|64| yuan2781 | [CodePen](https://codepen.io/ismebir/pen/oNJGEZq)|
|65| tanuki5863 | [CodePen](https://codepen.io/tanuki320/pen/vYvddLg)|
|66| patrickpie | [CodePen](https://codepen.io/patrickpie/pen/oNJqOjP?editors=1100)|

<!-- 快速複製

|00| user | [CodePen]()|

-->