<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>

.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;
}