<div class="container">
  <div class="image">
    <div class="specs">
      <h2>iPhone 7</h2>
      <p>
        Apple iPhone 7 Plus smartphone was launched in September 2016. The phone comes with a 5.50-inch touchscreen display with a resolution of 1080 pixels by 1920 pixels at a PPI of 401 pixels per inch.
      </p>
      <p>
        The Apple iPhone 7 Plus is powered by quad-core Apple A10 Fusion processor and it comes with 3GB of RAM. The phone packs 32GB of internal storage cannot be expanded.
      </p>
    </div>
    <div class="img"></div>
  </div>
</div>
@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("https://www.androidcentral.com/sites/androidcentral.com/files/styles/larger_wm_brw/public/article_images/2016/10/iphone-7-plus-10.jpg?itok=Ppn83I9K") 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);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.