---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 44

## 練習 opacity

### 題目

在圖片 hover 時加上 opacity 讓他產生透明度

hover 時，呈現如下：


HTML

<div class="container">
  <div class="row">
    <div class="col-4">
      <a href="#" class="d-block img-hover">
        <img src="https://github.com/hexschool/2022-web-layout-training/blob/main/week8-202207/art13.jpg?raw=true" alt="" class="img-fluid">
        <div class="triangle"></div>
      </a>
    </div>
  </div>
</div>

CSS

.triangle {
  position: absolute;
  ...
  ...
  display: none;
  /*  三角形  */
  width: 0;
  height: 0;
  border-right: 16px solid #E6553B;
  border-top: 16px solid transparent;
}

.img-hover {
  position: relative;
  background-color: #000;
  &:hover {
    &::after {
      content: 'more';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: ...;
      opacity: ...;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .triangle {
      ...
      z-index: 1;
    }
  }
}

> 有用到格線系統，記得載入 [Bootstrap CDN](https://bootstrap5.hexschool.com/docs/5.1/getting-started/introduction/#css)
>
> 三角形製作可以參考：https://www.casper.tw/css/2020/02/21/css-border/

## 回報流程

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


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

回報區
---

| Discord | CodePen / 答案 |
|:-----------------:|:-------------------------------------------------------------------:|
| Iris Huang#6727 | [CodePen](https://codepen.io/ythuang/pen/GRxejgE) |
| CloThEs#7837 | [CodePen](https://codepen.io/CloThEsZ/pen/eYMomwm) |
| 布魯諾#7239 | [CodePen](https://codepen.io/bruno-yu/pen/gOeyNvb) |
| Clara#1275 | [CodePen](https://codepen.io/bsupixqu/pen/bGvJPMe?editors=1100) |
| 威0#6919 | [codepen](https://codepen.io/n0918679182/pen/eYMowbr) |
| WEI_RIO#9342 | [codepen](https://codepen.io/wei_wu/pen/eYMowXr?editors=1100) |
| bonnieli1414#4906 | [codepen](https://codepen.io/bonnieli1414/pen/ZExZdMr?editors=1100) |
| Hsiu#8767 | [codepen](https://codepen.io/amy-hsiu/pen/LYdvKwK) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/MWVRNaX) |
| 大衛#4869 | [CodePen](https://codepen.io/exnsrpjc/pen/VwXNopv?editors=1100) |
| PeggyLiao#1552 | [CodePen](https://codepen.io/PeiJu-Liao/pen/vYRMoxG?editors=0110) |
| Cliff#4606 | [Codepen](https://codepen.io/Cliff_hex/pen/rNdbQdd?editors=1100) |
| Benson#6763 | [Codepen](https://codepen.io/kumashow/pen/BarEXrm) |
| 我是泇吟 #5189 | [CodePen](https://codepen.io/kljuqbxs/pen/xxWevdv) |
| azami#5986 | [CodePen](https://codepen.io/azami/pen/RwMOXYp) |
| LHchien33#6232 | [CodePen](https://codepen.io/lin_chien/pen/poLBMqq) |
| Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/xxWevyG) |
| JackC#0411 |[CodePen](https://codepen.io/key0329/pen/oNqRvxW) |
| Joyce#3790 |[CodePen](https://codepen.io/joycehuang/pen/qBoGWKP?editors=1100)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/oNqRvyp?editors=0110)|
|Potatolee#7749|[Codepen](https://codepen.io/potatoleee/pen/QWmRLXb)|
| yuyu#6310 |[Codepen](https://codepen.io/yuyu0905/pen/mdxYbNa?editors=1100)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/wvmbwME) |
| Amberhh #2465 | [Codepen](https://codepen.io/Amberhh/pen/MWVdWOv) |
| yo_yo#2678 | [Codepen](https://codepen.io/djmliogn-the-flexboxer/pen/yLKWLvX?editors=1100) |
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/rNdgNRK?editors=1100) |
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/MWVdWLr) |
| Henry#7386 | [Codepen](https://codepen.io/h1nr9/pen/WNzBbjd) |
| LinaChen#1796 | [Codepen](https://codepen.io/LinaChen/pen/VwXNovY) |
|zera#6060|[codepen](https://codepen.io/zera-tseng/pen/ZExNbEL)|
| YU #0618 | [CodePen](https://codepen.io/yoken_/pen/poLmbKw) |
| Arista#5802 |[CodePen](https://codepen.io/arista-hsieh/pen/PoRvbEd) |
| 鉦勝 #8333 |[CodePen](https://codepen.io/atckmax823/pen/vYRwgEV) |
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/poLmWjY)|
|YEN#5757|[Codepen](https://codepen.io/TZU-HUANG-YEN/pen/PoRvOeo?editors=1100)|
|NeilLin#3009|[Codepen](https://codepen.io/a0071421/pen/eYMaMgW)|
|QOO#8446|[Codepen](https://codepen.io/QOOQOOQ/pen/BarerpB?editors=1100)|
|雷雷#7844|[Codepen](https://codepen.io/lei-yi-jie/pen/dymEjpj?editors=1100)|
|黑白兔#0684|[Codepen](https://codepen.io/johnny329/pen/QWmXKBa)|
|Ryan Chiang#6649|[Codepne](https://codepen.io/ryanchiang/pen/qBozVZP)|
|YI#0863|[Codepne](https://codepen.io/YI0305/pen/YzaoJrZ?editors=1100)|
|L0F0#8733|[Codepne](https://codepen.io/l0f0/pen/zYWVbPw?editors=0110)|
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/eYMwqbL)|
|kevin8349#6131|[Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/RwMXpam?editors=1100)|
|mei#8421|[Codepen](https://codepen.io/Shila-Chen/pen/eYMqaXq)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/poVzdYJ)|
|IreneY#0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/ExLxwKe)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchung[shuo/pen/Jjvdqxm)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/bGMEBWy)
|阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/OJZNVVE?editors=1100)
|得源#8355|[CodePen](https://codepen.io/aglgvsie/pen/MWGyvdx)|
|Vera#5592|[CodePen](https://codepen.io/skvera/pen/qBYmvXe)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/zYjExzQ)|
|Melon#0380|[Codepen](https://codepen.io/BalaFang/pen/NWMLLZE)|