Responsive Web Design
  • Responsive Web Design 課程
  • 1 簡介
    • 1.1 講者簡介
    • 1.2 課程簡介
  • 2 版面概念解析
  • 3 Media Query
    • 3.1 媒體類型 Media Type
    • 3.2 媒體描述 Media Features
    • 3.3 練習
  • 4 Viewport
    • 4.1 Viewport 定義
    • 4.2 HTML Viewport Meta
  • 5 Bootstrap Grid System
    • 5.1 載入 Grid 相關 CSS
    • 5.2 Grid System
    • 5.3 breakpoint 練習
  • 6 Transition 轉場效果
    • 6.1 第一個 transition
    • 6.2 transition-property
    • 6.3 transition-duration
    • 6.4 transition-timing-function
    • 6.5 transition-delay
    • 6.6 transition 簡寫
    • 6.7 練習
  • 7 Grid 排版模式
    • 7.1 基本觀念及術語
    • 7.2 Grid Container
    • 7.3 Grid Items
    • 7.4 練習
  • 8 Animation 動畫效果
    • 8.1 第一個 animation
    • 8.2 關於 keyframes
    • 8.3 相同元素套用多個 animation
    • 8.4 animation-iteration-count
    • 8.5 animation-direction
    • 8.6 animation-delay
    • 8.7 animation-fill-mode
    • 8.8 animation-play-state
    • 8.9 animation-timing-function
    • 8.10 animation 簡寫
    • 8.11 練習
  • 9 練習
  • 10 RWD 作業
  • 11 手機連本機端網站
  • 12 參考資料
  • 13 補充：AOS
Powered by GitBook
On this page
  1. 6 Transition 轉場效果

6.7 練習

Previous6.6 transition 簡寫Next7 Grid 排版模式

Last updated 1 year ago

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

檔名建議：text_cover.html

說明：

  • 圖片路徑：

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

  • 圓角 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>

參考作法：

https://picsum.photos/id/774/500/300