jQuery Flip

by Zuhaib Siddiqui

HTML

<script src="http://nnattawat.github.io/flip/asset/js/jquery.flip.js"></script>
<div id="card" class="fliper"> 
  <div class="front"> 
    Front content
  </div> 
  <div class="back">
    Back content
  </div> 
</div>

CSS

.fliper{
    width:400px;
    float:left;
}
.fliper .front,
.fliper .back{
    width:100%;
    height:100px;
    padding:20px;
   
}
.fliper .front{
     background-color:#cfcfcf;
}
.fliper .back{
    background-color:#5a88aa;
}

JavaScript

$("#card").flip({
  axis: 'y',
  trigger: 'hover'
});