css - 覆盖 CSS 中的父级(方形空间)

Question

我对 CSS 有点陌生，但我在 Squarespace 上创建了一个网站，但在重写父类时遇到了问题。基本上，我一直在努力使网格中的所有图像都变暗，当您将鼠标悬停在它们上方时，它们会与文本一起亮起。问题是，h2 和 h3 中的文本似乎总是被 .wrapper 的不透明度覆盖。

目前源代码看起来是这样的:

---

 <div class="item">
  <a href="/news/" data-dynamic-load data-dynamic-receiver="#detail_540e1c21e4b00b3e087650b7"   >
    <div class="wrapper">
      <div class="project-title">
        <h2>NEWS</h2>
        <h3>&mdash; view &mdash;</h3>
      </div>
    </div>
  </div>

---

在显示和使用不透明度之间，我尝试了几种方法。像这样的东西:

#grid .item {
  .wrapper {
    opacity: 1;
    .project-title h2,h3 {
      display:none; 
    }
  }

  &.hovering .wrapper {
    opacity: 0;
    .project-title h2,h3 {
      display:block !important;}
      }
}

有什么解决这个问题的建议吗？

Answer 1

我相信这就是您要找的。您可以将其放入设计下的自定义 CSS 中。任何作为链接的图像在悬停之前都将显示为黑白。悬停会给他们带来全彩。

目标幻灯片 - 应与图库一起使用

 #slideshow .slide img {
      -webkit-filter: grayscale(1);
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
    }
    #slideshow .slide img:hover {
      -webkit-filter: grayscale(0);
      -webkit-filter: grayscale(0%);
      filter: grayscale(0%);
    }

仅定位链接图像

a:link img {
    -webkit-filter: grayscale(1);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

    a:hover img {
         -webkit-filter: grayscale(0);
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}