Darken Image background on hover w/o affecting text

Question

Here's my issue:

I've got circular images (using bootstrap's img-circle class) wrapped in 'a' tags. When the user hovers, the 'img' opacity is lowered, effectively darkening the image, and text is revealed.

Problem is, the opacity of the text is being affected as well, even though I haven't targeted it. The text is outside of the div containing the the 'a' & 'img' tags, and I assumed this would prevent it from being affected.

Link to Codepen Example

HTML

<div class="contactpeople">
<div class="container">

<h3>OR CONTACT US DIRECTLY</h3>

<div class="row">
  <div class="col-sm-4">
    <div class="employees">
      <div class="portrait">
        <a class="img-circle darken"><img class="img-circle" src="http://45.79.67.59/images/employee_max.jpg"/>
        </a>
        <div class="contactinfo">
          <div>津坂晋一</div>
          <div>Account Manager</div>
          <div><a href="mailto:mail@mail.com">mail@mail.com</a></div>
        </div>

      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="employees">
      <div class="portrait">
        <a class="img-circle darken"><img class="img-circle" src="http://45.79.67.59/images/employee_max.jpg"></a>
        <div class="contactinfo">
          <div>福井麻里子</div>
          <div>Mynewsdesk Japan<br>Country Manager</div>
          <div><a href="mailto:mail@mail.com">mail@mail.com</a></div>
        </div>
      </div>
    </div>
  </div>
  <div style="padding-left: 70px; padding-right: 70px;" class="col-sm-4">
    <div class="employees">
      <div class="portrait">
        <a class="img-circle darken"><img class="img-circle" src="http://45.79.67.59/images/employee_max.jpg">
        </a>
      <div class="contactinfo">
        <div>マックス・レーム</div>
        <div>Account Manager</div>
        <div><a href="mailto:mail@mail.com">mail@mail.com</a>               </div>
      </div>
    </div>
  </div>
</div>

CSS

.employees img{
height: 100%;
width: 250px;
}
a.darken{
display: inline-block;
background: black;
padding: 0;
}
a.darken img {
display: block;

-webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
     -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
}
a.darken:hover img {
opacity: 0.5;
}
a.darken:hover + .contactinfo{
display: block;
}
.cta.btn{
margin-top: 4px;
margin-bottom: 4px;
}
.contactpeople{
text-align: center;
}
.contactinfo{
margin-top: -170px;
margin-bottom: 170px;
display: none;
}

Answer 1

came up with this: JSFiddle

.contactinfo{
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 border-radius: 50%;
 background-color: rgba(0,0,0,0.5);
 padding-top: 38%;
 opacity: 0;
 -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
}

Instead of using the opacity , i use background-color: rgba() this will give opacity to the whole container but not the text inside of it. check it out!

Answer 2

Not too easy to solve. Making contactinfo position relative removes the transparency, but makes it flicker as it's still affected by the transitions (don't know why), so I prevented any hover effect with pointer events none. Here's my workaround, given your fiddle:

CSS:

.contactinfo {
  margin-top: -170px;
  margin-bottom: 170px;
  display: none;
  position: relative;
  pointer-events: none;
}
.portrait {
  cursor: pointer;
}

But now the email link wouldn't work, so I added the link to the portrait container:

HTML:

<div class="portrait" onclick="location.href='mailto:mail@mail.com'">
...
</div>