Edit in JSFiddle

<div id="f1_container">
  <div id="f1_card" class="shadow">
    <div class="front face" style="background:url(http://teamcontego.co.za/wp-content/uploads/2016/02/Adriaan-Louw-TeamCard-350x550.jpg) no-repeat 0 0; background-size:cover;"> </div>
    <div class="back face center">
      <h3> MOUNTAIN BIKER | INDUSTRIAL DESIGNER </h3>
      <h3> 1991|09|18 </h3>
      <p> Adriaan is a qualified Industrial Designer turned pro mountain biker. Adriaan spends endless hours refining the details although he enjoys a good joke in the most serious of situations which is critical in mountain-biking where so much can go wrong
        at any time.
        <br>
        <br> He has a passion for the outdoors, family and racing bikes. He started racing as a light back in 2004 and his passion for the sport has grown brighter ever since.
        <br>
        <br> Adriaan has raced for many top tier South African mountain bike teams but on on his new team, which he has started in 2015, he hopes to build the greatest mountain biking partnership that South Africa has ever seen . </p>
    </div>
  </div>
  <ul class="socialslist">
    <li class="sociallink01">
      <a href="https://www.facebook.com/kief.louw?ref=br_rs" class="socialslistbutton"><img width="100%" height="auto" src="http://teamcontego.co.za/wp-content/uploads/2016/02/Facebook-icon.jpg"></a>
    </li>
    <li class="sociallink01">
      <a href="https://www.facebook.com/kief.louw?ref=br_rs" class="socialslistbutton"><img width="100%" height="auto" src="http://teamcontego.co.za/wp-content/uploads/2016/02/twitter-icon.jpg"></a>
    </li>
    <li class="sociallink01">
      <a href="https://www.facebook.com/kief.louw?ref=br_rs" class="socialslistbutton"><img width="100%" height="auto" src="http://teamcontego.co.za/wp-content/uploads/2016/02/instagram-icon.jpg"></a>
    </li>
    <li class="sociallink01">
      <a href="https://www.facebook.com/kief.louw?ref=br_rs" class="socialslistbutton"><img width="100%" height="auto" src="http://teamcontego.co.za/wp-content/uploads/2016/02/youtube-icon.jpg"></a>
    </li>
  </ul>
</div>

#f1_container {
  position: relative;
  margin: 0 auto;
  padding: 2%;
  width: 100%;
  height: 50vh;
  z-index: 1;
  min-height: 500px;
  max-height: 600px;
  min-width: 350px;
  max-width: 450px;
}

#f1_container {
  perspective: 1000;
}

#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
}

#f1_container:hover #f1_card {
  transform: rotateY(180deg);
  background: #333;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 2%;
  color: white;
  text-align: center;
}

.socialslist {
  margin: 0;
  padding: 0;
  display: inline-flex;
  list-style-type: none;
  width: 100%;
  height: auto;
  background: #333;
}

.sociallink01 {
  text-align: center;
  list-style-type: none;
  width: 25%;
  height: auto;
}

.socialslistbutton {
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  width: auto;
  height: auto;
}

.socialslistbutton:hover {
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  width: auto;
  height: auto;
  -webkit-filter: saturate(100);
  -webkit-filter: hue-rotate(145deg);
}