<div class="flip-wrapper" ontouchstart="this.classList.toggle('hover');">
  <div class="flip-container">
    <div class="front-card"></div>
    <div class="back-card">
      <div class="back-title">CSS Examples</div>
      <p>16 Animations, Effects and Snippets</p>
    </div>
  </div>
</div>
.flip-wrapper {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
  margin: 30px auto 0 auto;
}

.flip-wrapper:hover .flip-container,  
.flip-wrapper.hover .flip-container {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-wrapper, .front-card, .back-card {
	width: 330px;
	height: 200px;
}

.flip-container {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;

	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;
  
  -o-transition: 0.6s;
	-o-transform-style: preserve-3d;

	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

.front-card, .back-card {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

.front-card {
	background: url(http://blog.blufra.me/wp-content/uploads/2016/03/CSSAnimationsEffectsSnippets-400x247.png);
  background-repeat: no-repeat;
  background-size: cover;
	z-index: 2;
}

.back-card {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
	transform: rotateY(180deg);
  background-color: rgba(255,125,20,0.8);
}

.back-title {
	font-weight: bold;
	color: #fff;
	position: absolute;
	top: 65px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 24px;
  font-family: 'Oswald','Source Sans Pro',sans-serif;
}

.back-card p {
	position: absolute;
	bottom: 45px;
	left: 0;
	right: 0;
	text-align: center;
	padding: 0 20px;
	color: #fff;
  font-family: 'Oswald','Source Sans Pro',sans-serif;
  font-size: 17px;
}
/*
  Developed with love by Blu Frame

  http://blufra.me  
*/
Rerun