別稱 Image comparison slider, Compare slider
拖曳分隔線，一側顯示一張圖片，另一側顯示另一張。
適用情境
照片修圖、產品比較
在[套用位置]加入「前後對比滑桿」(Before-After Slider)，也叫 image comparison slider 或 compare slider。
兩張圖片上下疊放，拖曳一條垂直分隔線時，一張露出更多、另一張露出更少；分隔線緊跟游標，沒有延遲。
分隔線一開始位於中間，並支援觸控和方向鍵操作。別稱 Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
懸停時圖片在框內放大，有時還會隨游標平移。
適用情境
產品卡片、縮圖
在[套用位置]加入「懸停縮放」(Hover Zoom) 效果，也叫 image zoom on hover 或 zoom-pan。
游標停在圖片上時，圖片在框內緩慢平順地放大，框的尺寸保持不變；游標移開後平順復原。
把圖片裁切在框內，不要溢出版面；鍵盤焦點時也呈現同樣的放大效果。別稱 Mask reveal, Clip-path reveal, SVG mask effect, Scroll Image Reveal, Clip-path Reveal on Scroll
遮罩收縮或遮色片邊緣擴展，逐漸露出圖片。
適用情境
捲動時出現的編輯類配圖
在[套用位置]加入「圖片擦除顯現」(Image Reveal Wipe)，也叫 mask reveal 或 clip-path reveal。
圖片捲動進入畫面時，遮罩從一側擦除，隨捲動進度平順地露出圖片，並在圖片離開畫面之前早早完全展開。
預留圖片所占空間，避免版面跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，直接完整顯示圖片。別稱 Slow pan and zoom, Ken Burns, Kenburns
靜態圖片在框內緩慢縮放並平移。
適用情境
主視覺輪播、背景
在[套用位置]加入「肯·伯恩斯效果」(Ken Burns Effect)，也叫 slow pan and zoom。
每張圖片顯示時只朝一個方向非常緩慢地縮放、漂移，然後交叉淡入到下一張，下一張朝另一個方向移動：平靜而連續。
讓每張圖片在任何時刻都填滿整個框，絕不露出邊緣；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，讓圖片保持靜止。別稱 Image zoom overlay, Medium-style zoom
縮圖從原位置放大，在變暗的背景上置中顯示為大圖。
適用情境
圖庫、文章
在[套用位置]加入「燈箱縮放」(Lightbox Zoom)，也叫 image zoom overlay 或 Medium-style zoom。
點擊縮圖時，它從原位置平順放大成置中的大圖，背後的頁面隨之變暗退後；關閉時再縮回原本的位置。
支援按 Esc 或點擊背景關閉；開啟期間把焦點移到大圖檢視內，關閉後把焦點還給縮圖。別稱 Lens, Loupe, Lens (Magnifier), Hover zoom lens
圓形鏡片跟隨游標，顯示圖片局部的放大畫面。
適用情境
商品詳情圖
在[套用位置]加入「放大鏡」(Magnifier Lens)，也叫 lens 或 loupe。
一個圓形鏡片無延遲地緊貼在游標正下方，顯示其下方那部分圖片的放大畫面。
放大畫面要與游標下的確切位置對齊；在觸控裝置上，手指按住圖片時顯示鏡片。