Squarespace Flat-iron模板索引画廊悬停效果反转技术问询

嘿，这个需求我帮你捋清楚怎么实现，而且保证不破坏模板原有的缩放、文本等悬停效果！

核心思路 #

默认状态下给缩略图加上深色半透明叠加层，让图片看起来是“深色遮罩”的低透明度效果；当鼠标悬停时，隐藏这个叠加层，露出清晰的原图。这种方式不会直接修改图片本身的透明度，而是用独立的伪元素来实现遮罩，完全不会干扰模板原有的缩放、文本动画。

具体CSS代码 #

你只需要把这段代码添加到模板的自定义CSS区域（比如主题设置里的自定义CSS，或者child theme的style.css）：

/* 针对Flat-iron画廊的缩略图容器 */
.gallery-index .thumbnail {
  position: relative; /* 让伪元素基于这个容器定位 */
}

/* 默认显示的深色叠加层 */
.gallery-index .thumbnail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 这里的0.6是遮罩的透明度，可根据需求调整 */
  z-index: 1; /* 确保叠加层在图片上方，但在文本下方（如果有） */
  transition: opacity 0.3s ease; /* 和模板原有过渡动画速度保持一致，避免突兀 */
}

/* 确保图片本身默认完全不透明，不影响原有缩放效果 */
.gallery-index .thumbnail img {
  opacity: 1 !important; /* 用!important覆盖模板默认的图片透明度设置 */
}

/* 悬停时隐藏叠加层 */
.gallery-index .thumbnail:hover::before {
  opacity: 0;
}

/* 保留模板原有的图片缩放效果（如果模板自带的话） */
.gallery-index .thumbnail:hover img {
  transform: scale(1.05); /* 这里数值和模板原有保持一致，不确定的话可以去掉这行，让模板默认样式生效 */
}

注意事项 #

• 类名调整：如果你的模板里画廊容器的类不是.gallery-index，或者缩略图容器不是.thumbnail，请用浏览器开发者工具（F12）查看实际的类名，替换代码里的选择器。
• 过渡速度：代码里的0.3s是过渡动画的时长，你可以改成和模板原有悬停效果一致的数值，让动画更协调。
• 遮罩颜色：rgba(0,0,0,0.6)是黑色半透明，你也可以换成其他颜色，比如深灰色、深蓝色，只要调整RGB值和最后一个透明度参数就行。

这样设置后，缩略图默认会有深色遮罩，悬停时遮罩消失，同时模板原有的图片缩放、文本显示等效果完全不受影响～

内容的提问来源于stack exchange，提问作者c.coll