css - 无法让 CSS 层上升到 "opacitied"层之上

Question

是的，我知道这不是一个词，但我的大脑现在超速运转，我的一天快结束了。

这是代码笔:http://codepen.io/anon/pen/mJKgwd

HTML:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-4 col-lg-3 thumb">
      <div class="thumbnail-bg">
        <a class="thumbnail client-blah1" href="#">
          <div class="client-title glyphicon glyphicon-zoom-in"></div>
          <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="680px" height="510px" id="blah1-ph" class="img-responsive"></svg>
        </a>
      </div>
    </div>
    <div class="col-xs-12 col-md-4 col-lg-3 thumb">
      <div class="thumbnail-bg">
        <a class="thumbnail client-blah1" href="#">
          <div class="client-title glyphicon glyphicon-zoom-in"></div>
          <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="680px" height="510px" id="blah2-ph" class="img-responsive"></svg>
        </a>
  </div>
    </div>
    <div class="col-xs-12 col-md-4 col-lg-3 thumb">
      <div class="thumbnail-bg">
        <a class="thumbnail client-blah1" href="#">
          <div class="client-title glyphicon glyphicon-zoom-in"></div>
          <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="680px" height="510px" id="blah3-ph" class="img-responsive"></svg>
        </a>
      </div>
    </div>
    <div class="col-xs-12 col-md-4 col-lg-3 thumb">
      <div class="thumbnail-bg">
        <a class="thumbnail client-blah1" href="#">
          <div class="client-title glyphicon glyphicon-zoom-in"></div>
          <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="680px" height="510px" id="blah4-ph" class="img-responsive"></svg>
        </a>
      </div>
    </div>
    <div class="col-xs-12 col-md-4 col-lg-3 thumb">
      <div class="thumbnail-bg">
        <a class="thumbnail client-blah1" href="#">
          <div class="client-title glyphicon glyphicon-zoom-in"></div>
          <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="680px" height="510px" id="blah5-ph" class="img-responsive"></svg>
        </a>
      </div>
    </div>
  </div>
</div>

CSS:

.thumb {
    transform: translateZ(0);
    margin-bottom: 30px;
    position: relative;
}
.thumbnail-bg {
    background-color: rgba(34, 34, 34, 1.0);
}
.thumbnail {
    border-radius: 0;
    border: 0 !important;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    width: 100%;
    max-height: 300px;
    overflow: hidden;
    transition: opacity 1s ease;
}
.thumbnail:hover {
  opacity: 0.2;
}
.thumbnail:hover .client-title {
  display: block;
}
.client-title {
    width: 100%;
    text-align: center;
    font-size: 5em;
    text-shadow: 1px 1px 0 rgb(34, 34, 34), 0 0 0 rgb(34, 34, 34), 1px 1px 8px rgb(34, 34, 34);
    display: none;
    position: absolute;
    top: 50%;
    left: 0;
    color: rgb(231, 231, 231);
    transform: translateY(-50%);
}

@media screen and (min-width: 992px) {
  .thumbnail {
    max-height: 200px;
  }
}

.client-blah1 { background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97300&w=300&h=300'); }

除了让覆盖的字形图标在悬停时显示在不透明层“上方”之外，一切正常。

我尝试了很多不同的方法，包括使用 z-index、在代码周围物理移动 div 元素(即在子元素之外设置为低不透明度以允许 BG 颜色通过)。

我不太确定从这里开始该怎么做，代码是直接从实际站点代码中摘录的，所以我知道这不是代码库中其他地方的环境/其他问题，因为在 codepen 中也会发生同样的事情。

我确信这是我忽略的一些简单和基本的东西，但我想我无法像他们说的那样只见树木不见森林。

任何帮助将不胜感激，在此先感谢。

PS 我不想默认使用基于 jQuery 的解决方案，CSS 已经达到 99.9%。

Answer 1

您需要在缩略图类上使用带 rgba 的背景色。这样 css 只会改变背景的不透明度/alpha，而不是像不透明度那样改变整个容器。

.thumb {
    transform: translateZ(0);
    margin-bottom: 30px;
    position: relative;
}
.thumbnail-bg {
    background-color: rgba(34, 34, 34, 1.0);
}
.thumbnail {
    border-radius: 0;
    border: 0 !important;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    width: 100%;
    max-height: 300px;
    overflow: hidden;
    transition: background-color 1s ease;
}
.thumbnail:hover {
  background-color: rgba(99,99,99, 0.2)
}
.thumbnail:hover .client-title {
  display: block;
}
.client-title {
    width: 100%;
    text-align: center;
    font-size: 5em;
    text-shadow: 1px 1px 0 rgb(34, 34, 34), 0 0 0 rgb(34, 34, 34), 1px 1px 8px rgb(34, 34, 34);
    display: none;
    position: absolute;
    top: 50%;
    left: 0;
    color: rgb(231, 231, 231);
    transform: translateY(-50%);
}

@media screen and (min-width: 992px) {
  .thumbnail {
    max-height: 200px;
  }
}

.client-blah1 { background-color: rgba(99,99,99,1) }