Lightbox Zoom (燈箱縮放)

卡片展開成完整的詳細畫面，始終是同一個可見容器在改變形狀並顯示新內容。

在[套用位置]加入「容器轉換」(Container Transform) 轉場，也叫卡片展開到詳細頁 (card expand to detail) 或可展開卡片 (expandable card)。
開啟卡片時，同一個容器平順地擴展成完整的詳細畫面：舊內容迅速淡出，容器快要展開完時新內容再淡入；關閉時反向播放。
始終維持一個連續的容器，而不是在兩個獨立的方框之間交叉淡化；開啟後把焦點移到詳細畫面裡。

對應的元素（例如縮圖）在頁面之間變換位置和大小。

在[套用位置]加入「共享元素轉場」(Shared Element Transition)，也叫 hero transition 或 view-transition-name morph。
進入下一頁時，對應的元素（例如縮圖）平順地移動並放大到新頁面上的位置，其餘內容交叉淡化；返回時再縮回去。
給兩個頁面上對應的元素同一個共享識別，確保正確配對；瀏覽器無法變換時，退回為單純的交叉淡化。

對話框在變暗的頁面上方，從中心稍微放大並淡入。

在[套用位置]加入「對話框縮放淡入」(Modal Scale-Fade In) 動畫，也叫對話框開啟動畫 (dialog open animation) 或縮放淡入對話框 (zoom-fade dialog)。
後方頁面變暗的同時，對話框從中心稍微放大並淡入：快速、含蓄，不要回彈。
每次開啟對話框都播放一次，把焦點移進對話框並留在裡面；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，只用簡單的淡入。

懸停時圖片在框內放大，有時還會隨游標平移。

在[套用位置]加入「懸停縮放」(Hover Zoom) 效果，也叫 image zoom on hover 或 zoom-pan。
游標停在圖片上時，圖片在框內緩慢平順地放大，框的尺寸保持不變；游標移開後平順復原。
把圖片裁切在框內，不要溢出版面；鍵盤焦點時也呈現同樣的放大效果。

圓形鏡片跟隨游標，顯示圖片局部的放大畫面。

在[套用位置]加入「放大鏡」(Magnifier Lens)，也叫 lens 或 loupe。
一個圓形鏡片無延遲地緊貼在游標正下方，顯示其下方那部分圖片的放大畫面。
放大畫面要與游標下的確切位置對齊；在觸控裝置上，手指按住圖片時顯示鏡片。

拖曳分隔線，一側顯示一張圖片，另一側顯示另一張。

在[套用位置]加入「前後對比滑桿」(Before-After Slider)，也叫 image comparison slider 或 compare slider。
兩張圖片上下疊放，拖曳一條垂直分隔線時，一張露出更多、另一張露出更少；分隔線緊跟游標，沒有延遲。
分隔線一開始位於中間，並支援觸控和方向鍵操作。