Cacher is the code snippet organizer for pro developers

@import url('https://fonts.googleapis.com/css?family=Oswald:500|Roboto');
.container {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.image {
  position:relative;
  width:520px;
  height:320px;
  overflow:hidden;
  z-index:2;
}
.image > div {
  display:inline-block;
  transition:all 700ms ease-in-out;
}

.image .img {
  background:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,100,0.3)),url("http://www.doyoubuzz.com/var/f/pk/su/pksuAlpSbzMcm_7ZETyFKHDt8G0RCwj43o-neq9agN6_master.jpeg") center no-repeat;
  background-size:cover;
  width:100%;
  height:100%;
  position:absolute;
  left:0px;
  z-index:-1;
  transform-origin:left;
}
.image .specs {
  padding:15px 20px;
  transform-origin:left;
  width:320px;
  height:100%;
  transform:perspective(400px) rotateY(90deg);
  font-family:sans-serif;
  background:rgb(32, 35, 45);
  color:#eee;
}
.image .specs h2 {
  font-family: 'Oswald', sans-serif;
  font-size:28px; 
  font-weight:500;
}
.image .specs p {
  font-family: 'Roboto', sans-serif;
  font-size:14px;
  letter-spacing:1px;
}
.image:hover > .img {
  transform: translateX(320px) scale(1.2);
}
.image:hover > .specs {
   transform: perspective(400px) rotateY(0deg);
}

<div class="container">
  <div class="image">
    <div class="specs">
      <h2>HARUN PEHLİVAN  </h2>
      <p>
        FOUNDER CEO BLOGGER
      </p>
      <p>
        <a href="http://harunpehlivantebimtebitagem.business.site/" target="_blank"> HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP</a>
      </p>
    </div>
    <div class="img"></div>
  </div>
</div>