放大容器

放大容器用于给一块区域加上鼠标移上去会放大的效果：

容器里放上产品图、按钮图等内容，访客悬停时内容会轻微放大，适合产品卡片、推荐位等需要强调交互的模块。

常放在「图片背景容器」里，叠在楼层切图对应位置。

从左侧 「容器」 拖入 「放大容器」，调好大小后，把要放大的图片或子组件拖进容器内部即可。

组件能做什么

• 悬停放大：发布后鼠标移入该区域，内部内容会平滑放大（约 0.3 秒过渡）。
• 可嵌套内容：内部可拖入图片、热区、图片链接等，整块一起参与放大效果。
• 子元素联动：开启后，内部子组件随容器统一缩放，拖容器边角即可整体改大小。
• 占位可调：支持设置内边距、是否隐藏外边距，避免放大时超出被裁切或留白不合适。

设置项说明

位置与大小

容器可在画布上拖动；左边距、上边距在样式里填写。拖拽容器外框可改宽高；开启「子元素联动」时，以容器尺寸为准。

常见用法

产品卡片悬停强调

产品区每个卡片位置放一个放大容器，内部放产品图（可再加热区做点击），悬停时图放大吸引注意。

推荐图、卖点图

首页推荐位、卖点小图需要「移上去有反应」时，用放大容器包裹图片即可，不必手写动画。

注意事项

• 需留一定内边距：放大时会向外扩展，内边距过小可能被父级裁切，可适当加大或检查「超出隐藏」的父容器。
• 放在父容器内：建议放在「图片背景容器」等父组件里，保证定位与背景切图对齐。
• 点击跳转另设：放大只负责视觉效果；要跳转请在内部加热区或图片链接。
• 编辑器里为橙色框：发布后不显示边框，仅保留悬停放大。
• 与可变化图片不同：可变化图片是「换成另一张图」；放大容器是「同一张图变大」，按设计需求二选一或组合使用。

推荐操作顺序

1. 在背景容器内拖入「放大容器」并对齐切图位置；
2. 设置宽度、高度，适当设置内边距；
3. 将产品图或子组件拖入容器内部；
4. 开启「子元素联动」，预览悬停放大效果；
5. 保存并发布，在旺铺预览中再测一次。

如有疑问，可结合「图片背景容器」「透镜容器」文档一起查看。