<ul id="portfolio">
  <li>
    <div class="card"></div>
    <img src="http://lorempixel.com/300/200/people" alt="pic" />
    <div class="back">
      <h2>Johan van Tongeren</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
      <a href="http://www.dreamdealer.nl">www.dreamdealer.nl</a>
    </div>
  </li>
  <li>
    <div class="card"></div>
    <img src="http://lorempixel.com/300/200/abstract" alt="pic" />
    <div class="back">
      <h2>Johan van Tongeren</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
      <a href="http://www.dreamdealer.nl">www.dreamdealer.nl</a>
    </div>
  </li>
  <li>
    <div class="card"></div>
    <img src="http://lorempixel.com/300/200/technics/" alt="pic" />
    <div class="back">
      <h2>Johan van Tongeren</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
      <a href="http://www.dreamdealer.nl">www.dreamdealer.nl</a>
    </div>
  </li>
</ul>

body {
  background-color: lightblue;
  background-image: linear-gradient(top, rgba(255,255,255,.6) 0%, transparent 100%);
  background-repeat: no-repeat;
  padding: 50px;
}
a { color: hotpink; }
#portfolio {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 1060px;
}
#portfolio li {
  display: inline-block;
  margin-right:30px;
  position: relative;
  perspective: 600px;
  width: 320px;
  height: 220px;
}
#portfolio li img,
#portfolio li .back {
  position: absolute;
  left: 10px;
  top: 10px;
}
#portfolio .card {
  background: rgba(255,255,255,.7);
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 1px solid #999;
  border-radius: 3px;
  z-index: 2;
  position: absolute;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
#portfolio li img {
  z-index: 3;
  animation: showMe 1s;
}
#portfolio li .back {
  width: 300px;
  height: 200px;
  overflow: hidden;
  z-index: 2;
  animation: hideMe 1s;
  text-shadow: 0 1px #FFF;
}
#portfolio h2 {
   margin: 0 0 .5em 0; 
  padding-bottom: .5em;
  border-bottom: 1px solid #999;
}
#portfolio li:hover img {
  animation: hideMe 1s;
  animation-fill-mode: forwards;
}
#portfolio li:hover .back {
  animation: showMe 1s;
  animation-fill-mode: forwards;
}
@keyframes hideMe {
  0% { transform: translateY(0px); z-index 3; }
  49% { z-index: 3; -webkit-filter: blur(3px); }
  50% { transform: translateY(230px) rotateX(20deg); z-index: 2; }
  51% { z-index: 1; -webkit-filter: blur(3px) grayscale(0);}
  100% { transform: translateY(0px); z-index: 1;-webkit-filter: blur(4px) grayscale(1); }
}
@keyframes showMe {
  0% { transform: translateY(0px); z-index: 1;-webkit-filter: blur(3px) grayscale(1); }
  49% { z-index: 1;  }
  50% { transform: translateY(-230px) rotateX(-20deg); z-index: 2; }
  51% { z-index: 3; -webkit-filter: blur(3px) grayscale(0);}
  100% { transform: translateY(0px); z-index: 3; }
}