6.7 練習

文字蓋在圖片上方及游標滑過

檔名建議：text_cover.html

說明：

• 圖片路徑：https://picsum.photos/id/774/500/300

• 整個區塊是一個連結，點擊開新分頁。(連到任意網址皆可)

• 圓角 5px。

• 「美麗的風景」文字顏色 #FFF，背景色 hsla(0, 0%, 0%, .5)，文字大小 .8rem。定位在距離上方 10px、距離左側 0px。

• 「次要說明」文字，樣式同上，但預設看不到，定位在距離左側 0px、距離下方 0px。

• 滑鼠移過連結區塊，「次要說明」文字，往上滑出(transition)：transform .5s。

• 螢幕寬度小於等於 767.98px時，「次要說明」直接出現。

結果示意：

提供 html：

<a href="http://tw.yahoo.com" target="_blank" class="card">
  <img src="https://picsum.photos/id/774/500/300">
  <span class="hint_text">美麗的風景</span>
  <div class="other_notes">次要說明次要說明次要說明</div>
</a>

參考作法：