<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- StartFlip --> <section id="flip" class="flip content-block" data-selector="section, .section" style="outline: none; cursor: inherit;"> <div class="container"> <div class="row"> <h3 style="text-align: center; font-weight: bold; outline: none; cursor: inherit;" data-selector="h1, h2, h3, h4, h5, h6">SAY NO TO 6% COMMISSION℠<br> LIST YOUR HOME FOR 1%</h3> <div class="wrapper"> <div class="col_third"> <div class="hover panel"> <div class="front"> <div class="box1"> <p1>1</p1> </div> </div> <div class="back"> <div class="box2"> <strong>1% LISTING COMMISSION</strong><br> Instead of 3%<br> $3500.00 Minimum<br> <strong>PAID AT CLOSING</strong> </div> </div> </div> </div> <div class="col_third"> <div class="hover panel"> <div class="front"> <div class="box1"> <p1>2</p1> </div> </div> <div class="back"> <div class="box2"> <strong>2% BUYER COMMISSION</strong><br> Instead of 3%<br> to Buyers Agent.<br> <strong>PAID AT CLOSING</strong> </div> </div> </div> </div> <div class="col_third end"> <div class="hover panel"> <div class="front"> <div class="box1"> <p1>3</p1> </div> </div> <div class="back"> <div class="box2"> <strong>3% TOTAL COMMISSION</strong><br> Full Service Realtor<br> Save Thousands!<br> <strong>PAID AT CLOSING</strong> </div> </div> </div> </div> </div> </div><!-- /.row --> </div><!-- /.container --> </section> <!--// END Basic 1-1 -->

p1 { color: black; } /*-=-=-=-=-=-=-=-=-=-*/ /* Column Grids */ /*-=-=-=-=-=-=-=-=-= */ .col_third { width: 32%; } .col_third{ position: relative; display:inline; display: inline-block; float: left; margin-right: 2%; margin-bottom: 20px; } .end { margin-right: 0 !important; } /*-=-=-=-=-=-=-=-=-=-=- */ /* Flip Panel */ /*-=-=-=-=-=-=-=-=-=-=- */ .wrapper{ width: 980px; margin: 0 auto; background-color: grey; hoverflow: hidden;} .panel { margin: 0 auto; height: 130px; position: relative; -webkit-perspective: 600px; -moz-perspective: 600px; } .panel .front, .panel .back { text-align: center; } .panel .front { height: inherit; position: absolute; top: 0; z-index: 900; text-align: center; -webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .panel .back { height: inherit; position: absolute; top: 0; z-index: 1000; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .panel.flip .front { z-index: 900; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); } .panel.flip .back { z-index: 1000; -webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg); } .box1{ background-color: white; width: 250px; height: 150px; margin: 0 auto; padding: 20px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .box2{ background-color: white; width: 250px; height: 150px; margin: 0 auto; padding: 20px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }

jQuery(document).ready(function($) { $('.hover').hover(function(){ $(this).addClass('flip'); },function(){ $(this).removeClass('flip'); }); });