带有不透明文本的图像悬停叠加

Question

我要做的是创建一个图像悬停效果，当您将鼠标悬停在图像上时，叠加层是不透明的，上面是普通文本。现在，文本和背景是不透明的。

我尝试了很多方法，从 z-index 到使用 CSS 更改文本的不透明度，但似乎没有任何解决方法。

.text {
  color: white;
  font-size: 20px;
  position: relative;
  width: 425px;
  height: 300px;
  overflow: scroll;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 1.0;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #000000;
  z-index: -3.0;
}

.container:hover .overlay {
  opacity: .5;
}

<div class="container">
  <img src="http://oi63.tinypic.com/141obo6.jpg" alt="dog" class="image">
  <div class="overlay">
    <div class="text">
      <h3>．：．Ａｐｐｅａｒａｎｃｅ．：．</h3>
    </div>
  </div>
</div>

Answer 1

问题出在属性opacity 中。 如果您为元素分配不透明度值，那么这也将应用于该元素内的所有子元素，在这种情况下，您的 .text 和 h3。

您可以通过使用rgba() 作为.overlay 的背景颜色并调整其中的不透明度来解决此问题，使其仅适用于该元素。

这是JSFiddle demo。

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  /* background: #20262E; */
}

.text {
  color: white;
  font-size: 20px;
  position: relative;
  width: 425px;
  height: 300px;
  overflow: scroll;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transition: .5s ease;
  background-color: rgba(0, 0, 0, 0);
  z-index: -3.0;
}

.container:hover .overlay {
  background-color: rgba(0, 0, 0, .5);
}

.container:hover .text {
  opacity: 1;
}

<div class="container">
  <img src="http://oi63.tinypic.com/141obo6.jpg" alt="dog" class="image">
  <div class="overlay">
    <div class="text">
      <h3>．：．Ａｐｐｅａｒａｎｃｅ．：．</h3>
    </div>
  </div>
</div>