别称 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。
一个圆形镜片无延迟地紧贴在指针正下方，显示其下方那部分图片的放大画面。
放大画面要与指针下的确切位置对齐；在触屏设备上，手指按住图片时显示镜片。