Why does background flicker on hover - css

Question

I have the HTML and CSS below. When I hover the image it's opacity goes to zero and a background colour appears while the text goes from display:none to block. But why is there flickering when hovering the text? I have tried setting backface-visibility:hidden on all elements but it does not remove the flicker.
It happens in current Firefox & Chrome and IE11.
Here is codepen demo of the problem
<div class="project-card">
<img src="http://s13.postimg.org/tiwekrks7/dummy_small_1.jpg" height="250" width="380">
<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

Here a solution based on what Zeta said :
HTML
<div class="project-card">
<img src="http://s13.postimg.org/tiwekrks7/dummy_small_1.jpg" height="250" width="380">
<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;
}
And the fiddle : https://jsfiddle.net/rf09bsse/