Shopify自定义Liquid区块图片悬停叠加层背景不显示求助

代码在CodePen可正常运行、部署到Shopify后hover遮罩不显示，基本都是Shopify主题环境的特有冲突导致，按以下点排查修复即可：

• 类名冲突（最高发原因）：所有Shopify官方/第三方主题，全局都预定义了.row、.container、.content这类通用类的默认样式，你写的同名样式优先级低于主题全局样式，会被直接覆盖——比如主题给.container强制设position: static、给相关元素设负z-index，都会直接导致绝对定位的遮罩层渲染异常。
• 无效HTML结构：你在自定义Liquid区块里额外写了<body>标签，Shopify集合页本身已经存在顶层<body>标签，嵌套的<body>属于非法HTML结构，浏览器渲染时会自动剔除这个多余标签，很容易打乱内部元素的定位、层级关系。
• 层级缺失：遮罩层.content-overlay没有设置z-index，Shopify主题普遍会给正文图片设置默认z-index值，会把遮罩层直接压在图片下方，哪怕hover时opacity变成1，也会被图片挡住看不见。
• 布局逻辑bug：你给.container设了50%宽度，但一行放了3个容器，总宽度150%会导致flex布局溢出错位，和主题原有栅格规则冲突。

所有自定义类名加了专属前缀，从根源避免和主题样式冲突，补全了层级设置，调整了3列自适应逻辑，移动端不会直接隐藏模块而是改成竖排展示：

CSS代码 #

/* 所有类加cust-hover前缀，彻底避免和主题类名冲突 */
.cust-hover-row {
  display: flex;
  gap: 20px;
  padding-bottom: 30px;
  flex-wrap: wrap;
}
.cust-hover-card {
  width: calc(33.333% - 14px);
}
.cust-hover-content {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.cust-hover-content .cust-hover-overlay {
  background-color: rgba(0,0,0,0.7);
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1; /* 保证遮罩在图片上方 */
  transition: all 0.4s ease-in-out;
}
.cust-hover-content:hover .cust-hover-overlay{
  opacity: 1;
}
.cust-hover-image{
  width: 100%;
  display: block;
}
.cust-hover-details {
  position: absolute;
  text-align: center;
  padding: 0 1em;
  width: 100%;
  top: 20%;
  left: 50%;
  opacity: 0;
  z-index: 2; /* 保证文字在遮罩上方 */
  transform: translate(-50%, -30%);
  transition: all 0.3s ease-in-out;
}
.cust-hover-content:hover .cust-hover-details{
  top: 50%;
  opacity: 1;
  transform: translate(-50%, -50%);
}
.cust-hover-details h3{
  color: #fcfcfc;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}
.cust-hover-details p{
  color: #fcfcfc;
  font-size: 0.8em;
  margin: 0;
}
/* 移动端适配：竖排展示，无需直接隐藏模块 */
@media only screen and (max-width: 768px){
  .cust-hover-card{
    width: 100%;
  }
}

HTML/Liquid代码 #

删掉了多余的<body>标签，类名和上述CSS完全对应：

{% if collection.metafields.collections.bottom_image_1 and collection.metafields.collections.bottom_image_2 and collection.metafields.collections.bottom_image_3 %}
<style>
/* 如果没有把CSS写到主题全局样式表，就把上面的CSS完整复制到这里 */
</style>
<div class="cust-hover-row">
  <div class="cust-hover-card">
    <div class="cust-hover-content">
      <div class="cust-hover-overlay"></div>
      <img class="cust-hover-image" src="{{collection.metafields.collections.bottom_image_1.value | img_url: 'master'}}">
      <div class="cust-hover-details">
        <h3>{{collection.metafields.collections.bottom_image_1_title.value}}</h3>
        <p>{{collection.metafields.collections.bottom_image_1_content.value}}</p>
      </div>
    </div>
  </div>

  <div class="cust-hover-card">
    <div class="cust-hover-content">
      <div class="cust-hover-overlay"></div>
      <img class="cust-hover-image" src="{{collection.metafields.collections.bottom_image_2.value | img_url: 'master'}}">
      <div class="cust-hover-details">
        <h3>{{collection.metafields.collections.bottom_image_2_title.value}}</h3>
        <p>{{collection.metafields.collections.bottom_image_2_content.value}}</p>
      </div>
    </div>
  </div>

  <div class="cust-hover-card">
    <div class="cust-hover-content">
      <div class="cust-hover-overlay"></div>
      <img class="cust-hover-image" src="{{collection.metafields.collections.bottom_image_3.value | img_url: 'master'}}">
      <div class="cust-hover-details">
        <h3>{{collection.metafields.collections.bottom_image_3_title.value}}</h3>
        <p>{{collection.metafields.collections.bottom_image_3_content.value}}</p>
      </div>
    </div>
  </div>
</div>
{% endif %}

额外提示：如果部署后仍有异常，打开浏览器控制台选中遮罩元素，检查是否有更高优先级的样式覆盖了属性，对应调整样式优先级即可。

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