<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 ----------> <h3 style="text-align: center; font-weight: bold;">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><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 the Agent who brings a buyer.<br> <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><br> <strong>PAID AT CLOSING</strong> </div> </div> </div> </div> </div>

p1 { color: #000; font-size: 600%; font-weight: bold; font-weight: 700; text-align:center; } /*-=-=-=-=-=-=-=-=-=-*/ /* Column Grids */ /*-=-=-=-=-=-=-=-=-= */ .col_half { width: 49%; } .col_third { width: 32%; } .col_fourth { width: 23.5%; } .col_fifth { width: 18.4%; } .col_sixth { width: 15%; } .col_three_fourth { width: 74.5%;} .col_twothird{ width: 66%;} .col_half, .col_third, .col_twothird, .col_fourth, .col_three_fourth, .col_fifth{ 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: #ff0000; 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: #fff; width: 250px; height: 150px; margin: 0 auto; padding: 20px; border-color: green; border-style: solid; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .box2{ background-color: #fff; width: 250px; height: 150px; margin: 0 auto; padding: 20px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }

$(document).ready(function(){ // set up hover panels // although this can be done without JavaScript, we've attached these events // because it causes the hover to be triggered when the element is tapped on a touch device $('.hover').hover(function(){ $(this).addClass('flip'); },function(){ $(this).removeClass('flip'); }); });