Image hover
@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>