css - 为什么悬停时背景会闪烁

Question

我有下面的 HTML 和 CSS。当我将鼠标悬停在图像上时，它的不透明度变为零并且出现背景色，而文本从 display:none 变为 block。但是为什么悬停文本时会闪烁？我已经尝试在所有元素上设置 backface-visibility:hidden 但它不会消除闪烁。

它发生在当前的 Firefox & Chrome 和 IE11 中。

这里是 codepen demo的问题

<div class="project-card">
<a href="#"><img  src="http://s13.postimg.org/tiwekrks7/dummy_small_1.jpg" height="250" width="380"></a>
<div class="project-caption">
<div class="pc-name">Absolut Vodka</div>
<div class="pc-type">Bottle</div>
<div class="pc-task">Fancy text</div>
</div>
</div>

.project-card {
  position: relative;
  display: inline-block;
  text-align: center;
  max-width: 32%;
  background-color: #0a3837;
}
.project-card p,
.project-card a,
.project-card img {
  margin: 0;
}
.project-card a {
  max-width: 100%;
  line-height: 0;
}
.project-card a:hover {
  opacity: 0.1;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.project-card a:hover + .project-caption {
  display: block;
}

.project-caption {
  display: none;
  color: white;
  font-size: 0.9rem;
  padding: 0 3rem;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.pc-name {
  text-transform: uppercase;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 2px solid white;
}

.pc-type,
.pc-task {
  font-style: italic;
}

Answer 1

这里有一个基于 Zeta 所说的解决方案:

HTML

<div class="project-card">
  <a href="#"><img  src="http://s13.postimg.org/tiwekrks7/dummy_small_1.jpg" height="250" width="380"></a>
  <div class="project-caption">
    <div class="pc-name">Absolut Vodka</div>
    <div class="pc-type">Bottle</div>
    <div class="pc-task">Fancy text</div>
  </div>
</div>

CSS

.project-card {
  position: relative;
  display: inline-block;
  text-align: center;
  max-width: 32%;
  background-color: #0a3837;
}
.project-card p,
.project-card a,
.project-card img {
  margin: 0;
}
.project-card a {
  max-width: 100%;
  line-height: 0;
}
.project-card:hover > a{
  opacity: 0.1;
}
.project-card:hover > a + .project-caption {
  display: block;
}

.project-caption {
  display: none;
  color: white;
  font-size: 0.9rem;
  padding: 0 3rem;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.pc-name {
  text-transform: uppercase;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 2px solid white;
}

.pc-type,
.pc-task {
  font-style: italic;
}

还有 fiddle :https://jsfiddle.net/rf09bsse/