Shopify中实现图片hover放大的方法及CSS添加、HTML结合问题

一、Shopify中添加CSS的常用方式 #

• 主题自定义面板：在线编辑主题时，找到「设置」>「自定义CSS」（不同主题位置略有差异，如Dawn主题在主题编辑器右上角设置内），直接粘贴CSS代码，全局生效。
• 主题代码文件：进入「在线商店」>「主题」>「操作」>「编辑代码」，在assets文件夹下的base.css、theme.css或对应组件CSS文件（如component-image.css）末尾添加代码，适合全局样式。
• 内嵌CSS：在HTML代码中使用<style>标签编写CSS，仅对当前模块生效，可实现HTML与CSS在同一代码主体结合。

二、图片悬停放大效果实现 #

你的目标是给multicolumn-card__image类的图片添加悬停放大，无需额外新增zoom类，直接针对现有类编写样式即可。

方式1：内嵌CSS（与HTML结合） #

将<style>标签放在图片代码上方（或模块开头），示例代码：

<style>
.multicolumn-card__image {
  transition: transform 0.3s ease; /* 平滑过渡动画 */
  transform-origin: center; /* 以图片中心为缩放原点 */
}
.multicolumn-card__image:hover {
  transform: scale(1.1); /* 放大1.1倍，可自行调整数值 */
}
</style>

<!-- 你的图片HTML代码 -->
<img class="multicolumn-card__image" srcset="//cdn.shopify.com/s/files/1/0621/4808/3896/files/cover_1_3750b60e-26ea-4618-b8a5-a597e561ecda.png?v=1682523968&amp;width=275 275w,//cdn.shopify.com/s/files/1/0621/4808/3896/files/cover_1_3750b60e-26ea-4618-b8a5-a597e561ecda.png?v=1682523968&amp;width=550 550w,//cdn.shopify.com/s/files/1/0621/4808/3896/files/cover_1_3750b60e-26ea-4618-b8a5-a597e561ecda.png?v=1682523968&amp;width=710 710w,//cdn.shopify.com/s/files/1/0621/4808/3896/files/cover_1_3750b60e-26ea-4618-b8a5-a597e561ecda.png?v=1682523968&amp;width=1420 1420w,//cdn.shopify.com/s/files/1/0621/4808/3896/files/cover_1_3750b60e-26ea-4618-b8a5-a597e561ecda.png?v=1682523968 1564w" src="//cdn.shopify.com/s/files/1/0621/4808/3896/files/cover_1_3750b60e-26ea-4618-b8a5-a597e561ecda.png?v=1682523968&amp;width=550" sizes="(min-width: 990px) 550px,
                        (min-width: 750px) 550px,
                        calc(100vw - 30px)" alt="服饰系列封面" height="2130" width="1564" loading="lazy">

方式2：全局CSS（主题代码文件） #

进入主题代码编辑，找到assets/base.css（以Dawn主题为例），在文件末尾添加以下代码，所有带multicolumn-card__image类的图片都会生效：

.multicolumn-card__image {
  transition: transform 0.3s ease;
  transform-origin: center;
}
.multicolumn-card__image:hover {
  transform: scale(1.1);
}

三、关键注意事项 #

• 不要将CSS代码嵌套在图片的style属性中（你提供的原代码存在此错误），style属性仅支持行内样式，无法嵌套<style>标签。
• 若缩放后图片溢出容器，可给图片父容器添加overflow: hidden（需根据你的主题替换父容器类名）：

.multicolumn-card__image-wrapper {
overflow: hidden;
}

- 过渡时间`0.3s`和缩放倍数`1.1`可根据需求调整，数值越大动画越平缓。

内容的提问来源于stack exchange，提问作者Jack Brooks