<section>
  <img src="https://images.unsplash.com/photo-1562306582-c6cd63bd517b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="photo"/>
  <div class="info">
    <h2>CSS: The Definitive Guide</h2>
    <em>Visual Presentation for the Web</em>
    <p>Eric A. Meyer and Estelle Weyl</p>
    <p>O'Reilly & Associates, 2007</p>
  </div>
</section>
* {
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #333;
}

section {
  position: relative;
  width: 300px;
  height: 240px;
  margin: 50px auto;
  transform-style: preserve-3d;
  transition: transform 600ms;
  transition-timing-function: ease-in;
}

img,
div {
  position: absolute;
  top: 0;
  left: 0;
}

img {
  width: 100%;
  height: 100%;
}

.info {
  width: 80%;
  height: 100%;
  padding: 20px 0;
  line-height: 30px;
  background-color: rgba(255, 255, 255, 0.85);
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

section:hover {
  cursor: pointer;
}
var $ = s => document.querySelector(s);

$('section').addEventListener('mouseenter', function(e) {
  this.style.transform = 'rotateY(180deg)';
}, false);

$('section').addEventListener('mouseleave', function(e) {
  this.style.transform = 'rotateY(0deg)';
}, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.