---
tags: 網頁切版直播班 - 2021 夏季班
---
# 8/18(三) 每日任務

## 題目

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

HTML

<div class="container">
  <ul class="row list-unstyled">
    <li class="col-6">
      <div class="card border-0">
        <img src="https://github.com/hexschool/webLayoutTraining1st/blob/master/perfume-week6/products8.jpg?raw=true" class="card-img-top">
        <div class="card-body p-0">
          <h5 class="card-title mb-0">Poppy & Barley</h5>
          <p class="card-subtitle">Jo Malone</p>
          <p class="card-subtitle">NT1,380<del class="ms-2">NT$1,580</del></p>
          <a href="#" class="card-link text-decoration-none">
            <i class="material-icons">favorite</i>
          </a>
          <a href="#" class="card-link text-decoration-none">
            <i class="material-icons">shopping_cart</i>
          </a> 
        </div>
      </div>
    </li>
    <li class="col-6">
      <div class="card border-0">
        <img src="https://github.com/hexschool/webLayoutTraining1st/blob/master/perfume-week6/product1.jpg?raw=true" class="card-img-top img-fluid">
        <div class="card-body p-0">
          <h5 class="card-title mb-0">Poppy & Barley</h5>
          <p class="card-subtitle">Jo Malone</p>
          <p class="card-subtitle">NT1,380<del class="ms-2">NT$1,580</del></p>
          <a href="#" class="card-link text-decoration-none">
            <i class="material-icons">favorite</i>
          </a>
          <a href="#" class="card-link text-decoration-none">
            <i class="material-icons">shopping_cart</i>
          </a> 
        </div>
      </div>
    </div>
  </li>
</ul>
</div>

CSS

.card-img-top:hover{
  ...
}

需透過 Codepen 繳交
* 載入 Bootstrap 及 material-icon CSS：https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.2/iconfont/material-icons.min.css

## 回報流程
1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～
解答及回報方式請參考下方


<!-- 解答：[Codepen 範例](https://codepen.io/AliceChiang/pen/ZEpEEOa?editors=1100) -->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/XWMEqmL
-->

<!-- 1. LiShang
https://codepen.io/li-shang/pen/RwVzNMy
-->

<!-- 2.Alpha
Codepen: https://codepen.io/alphatero/pen/jOmjExg
-->

<!-- 3.curry
Codepen: https://codepen.io/Ted19851223/pen/LYyKEmj
-->

<!-- 4. Vic
Codepen: https://codepen.io/hsuan333/pen/rNmEaKe
-->

<!-- 5. Jean
Codepen: https://codepen.io/jean-liu/pen/KKmjwGK
-->

<!-- 6. T
Codepen: https://codepen.io/hayen/pen/yLbWPxZ?editors=1100
-->

<!-- 7. xing
codepen: https://codepen.io/xing10/pen/LYyKEqO
-->

<!-- 8. Lina Chen
codepen: https://codepen.io/LinaChen/pen/ZEKdYZO
-->

<!-- 9. 大衛
codepen: https://codepen.io/exnsrpjc/pen/NWjZPQK
-->

<!-- 10. lumei
codepen: https://codepen.io/Bingbingboom/pen/XWMEqmL
-->

<!-- 11. 雷古娜
codepen: https://codepen.io/tinahopo/pen/WNjqvZw -->

<!-- 12. kevinhes
codepen: https://codepen.io/kevinhes/pen/eYWwNRE
-->

<!-- 13. roger
codepen: https://codepen.io/rogerchuang/pen/oNWrXam?editors=1100
-->

<!-- 14. huanan
codepen: https://codepen.io/hua_nan/pen/VwbJLOJ
-->

<!-- 15. Cate Chang
codepen: https://codepen.io/tutz/pen/oNWrXzM
-->

<!-- 16. Gill
codepen: https://codepen.io/Gill-Chin/pen/VwbJvZo

<!-- 17. Fleur
codepen: https://codepen.io/swwlee/pen/OJmjqLL
-->

<!--18. Cheng Pei-hsuan
codepen: https://codepen.io/PaCheng/pen/vYmMvaV
-->

<!--19. Joe Kuo
codepen: https://codepen.io/alertislow/pen/eYWwJgY
-->

<!--20. KK
codepen: https://codepen.io/potatokaka/pen/rNmExja
-->

<!-- 21. 蔡明達
CodePen: https://codepen.io/bmzpfyxe/pen/NWjZNWK?editors=1100
-->

<!-- 22. Sec
https://codepen.io/Sentiments/pen/eYWwZJv
-->

<!-- 23.陳sam
https://codepen.io/euldpliv/pen/GRmbqLE
-->

<!-- 24.阿瓜
https://codepen.io/hoick/pen/rNmEWaj -->

<!-- 25. Sz
https://codepen.io/szyln/pen/BaRgQMj
-->

<!-- 26. hellocrab
https://codepen.io/hellocrab/pen/WNjqRZX
-->
<!-- 27. 群嘉
codepen:https://codepen.io/efzdamnp-the-lessful/pen/yLbdbVa
-->

<!-- 28. 阿和
codepen:https://codepen.io/shnny/pen/wvdLdbW
-->

<!-- 29. 肉鬆
codepen: https://codepen.io/klrkicog/pen/xxdoPbm
-->

<!-- 30. 黃士桓
codepen: https://codepen.io/shr-huan-huang/pen/YzVoYPN
-->

<!-- 31. 沈依蓉
https://codepen.io/lily-oa/pen/qBmzoyB
-->

<!-- 32. axlrock1021
https://codepen.io/andy1021/pen/ExmBdNv
-->

<!-- 30. YuriT
codepen: https://codepen.io/wenfisht/pen/wvdLRKm
-->

<!-- 31. ZY Hsu
https://codepen.io/zihyin/pen/GRmbPvy -->

<!-- 32. Joy Cheng
codepen: https://codepen.io/joycheng5432/pen/YzVodBe -->

<!-- 33. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/MWmMdBp
-->

<!--34. Oober
https://codepen.io/xtsjrjdv/pen/rNmXNdq
-->

<!--35. Jim Hwang
https://codepen.io/jimh1129/pen/WNjVbQy
-->

<!-- 36. Alberto
https://codepen.io/AlbertoLL/pen/qBmeZyK
-->

<!--37. jimmyFang
https://codepen.io/pohxiqqo/pen/JjNgKKw
-->

<!--38. twoz
https://codepen.io/twoz/pen/JjNgbpp?editors=1100
-->

<!--39. Riley
https://codepen.io/jjpxbprd/pen/YzVmxKq
-->

<!-- 40. Min Chun Tsai
codepen: https://codepen.io/Tsai0926/pen/dyWxdjj
-->

<!-- 41. WilsonHan
https://codepen.io/wi0821/pen/gOWVzYm
-->

<!-- 42. Hi Annie
https://codepen.io/lhohdalu/pen/eYROOqR
-->

<!-- 43. yurie
https://codepen.io/_u_jung/pen/XWgrJMw
-->

<!-- 44. Gui
https://codepen.io/guitimliu/pen/BaZBLmJ -->

<!-- 45. una
https://codepen.io/xbsapbas-the-vuer/pen/abwoJyo?editors=1100 -->

<!-- 46. Sylvia-H
https://codepen.io/Cosmosheart/pen/jOwNaWr -->

<!-- 47.Elaine Liu
https://codepen.io/elaine7598/pen/JjJPOve -->

<!-- 48. ZOE WU
https://codepen.io/Zoechiueh/pen/qBjWprB?editors=1100
-->

<!-- 49. Jessie Cheng
https://codepen.io/JessieMosbi/pen/zYzYbLp
-->

<!-- 50. Erin Huang
https://codepen.io/ErinHuang/pen/gORbavJ
-->

<!-- 51. Jun Chan
Codepen: https://codepen.io/chujunchan/pen/GREgZPd
-->

<!-- 52. Sihle Huang
code: https://codepen.io/bugbug777/pen/jOwEJZP
-->

<!-- 53. AKI
https://codepen.io/akichen27/pen/LYLZxzY
-->

<!-- 54. Tina Yen
codepen: https://codepen.io/tlorfrnl-the-typescripter/pen/OJgRbxY
-->