<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Image Flip</title>

  <style type="text/css" media="screen">
    body {
      margin-top: 20px;
      height: 300px;
      font-size: 12px;
      line-height: 1.5em; 
      font-family: "Lucida Grande", Verdana, Arial;
    }
   #flip-container {
     position: relative;
     margin: 10px auto;
     width: 250px;
     height: 261px;
     z-index: 1;
   }
   .face.back {
     display: none;
   }
   @media all and (-webkit-transform-3d) {
     /* Use the media query to determine if 3D transforms are supported */
     #flip-container {
       -webkit-perspective: 1000;
     }
     #flip-card {
       width: 100%;
       height: 100%;
       -webkit-transform-style: preserve-3d;
       -webkit-transition: -webkit-transform 1s;
     }
     #flip-container:hover #flip-card {
       -webkit-transform: rotateY(180deg);
     }
     .face {
       position: absolute;
       width: 100%;
       height: 100%;
       -webkit-backface-visibility: hidden;
     }
     .face.back {
       display: block;
       -webkit-transform: rotateY(180deg);
       -webkit-box-sizing: border-box;
       padding: 10px;
       font-size: 12pt;
       color: white;
       text-align: center;
       background-color: #835A99;
       -webkit-border-radius: 10px;
     }
   }
   </style>

</head>
<body>
  <div id="flip-container">
  <div id="flip-card">
    <div class="front face">
      <img src="poster-circle.png" width="250" height="261" alt="Poster Circle"/>
    </div>
    <div class="back face">
      This flip effect is done entirely with 3D transforms and transitions&mdash;no JavaScript required!
    </div>
  </div>
  </div>

</body>
</html>