Frontebd Intermediate Course - 作業二

作業 2 的 GitHub 連結：讓畫面變得更動態：神奇的 CSS transition

第二個作業是第一個作業的延續，基本上在方塊的 CSS 下面增加 :hover，然後增加亮度 filter: brightness(1.2) 就達到作業的基本要求了，前後不到 5 分鐘就快速完成 XD 亮度沒有調很高，因為實況主的頭像是淺色的，亮度太高看起來很刺眼。

如果是在 CSS 裡用加圖片，要做到自我練習第一題的要求，hover 的時候改變顏色，也沒有很困難。:hover 下面加入方塊視窗的屬性，然後改變背景顏色，這裡我原本的背景是插入圖片的，所以有先移除背景圖片 background-image: none 再改背景顏色。

如果要讓滑鼠移過去一秒之後才發生 hover 的效果，也沒有很難，加入 transition-delay: 1s 就可以了。不過這裡會有一個問題產生，因為剛才先移除背景圖片才改背景顏色，所以 transition-delay 會變成那一秒是空白的，直接看到最底層的背景。這樣看起來很奇怪。

後來因為重新修改過作業一，把圖片放在 HTML 裡而不是加在 CSS background 裡，找到 w3schools 的 How To Create Image Hover Overlay Effects，方法是在圖片上加入一個 div 色塊，然後 opacity 設成 0，等到滑鼠 hover 過去時再把 opacity 變成 1。這個方法即使有 transition-delay 也不會有原本的斷層現象，似乎是比較好的解法。


其實作業二比作業一還簡單，我花比較多時間是在修改作業一上，因為以後的作業都會一直延續下去，所以還是把它整個修改過以後比較好繼續。一些主要的修改有：

• 把九個方塊放在同一個 div 裡，而不是分三排不同 div 放。
• 九方塊用 flexbox 定位，方塊底部也是用 flexbox 定位。
• 頻道名稱跟實況主名稱外面再加一個 div 包住，便於定位。
• 頻道名稱跟實況主名稱的寬度用 px 而不是 em，可以解決之前字數會被切斷在邊緣的問題。
• 增加 prefixes，因為搞不清楚到底哪些 CSS 要加 prefixes，後來搜尋到 Autoprefixer CSS online，而且 Sublime 上面也可加 Autoprefixer 的套件，這才救了我一命 XD

附上這次作業的 CodePen：

See the Pen HW_2 by Peggy (@pychiang) on CodePen.

這只是我寫作業過程的筆記，絕對不是最正確的。而我目前只是初心者，如果有錯還請指正。