<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 ----------> <div class="FourSections text-center container"> <div class="col-sm-3 warranty animated zoomInUp wow" style="animation-delay: 0.40s;"> <div><img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/originals/1b/38/0b/1b380b3f9f4c42a8963ac2a44dbf8aab.jpg" alt="authentic warranty"></div> <h4>EXTENDED WARRANTY</h4> <p>Up to <strong class="red">10 years</strong> Unlimited miles nationwide warranties available</p><br> <div class="col-sm-12 warranty"> <a href="/warranty" class="btn">warranty</a> </div> </div> <div class="col-sm-3 inventorys animated zoomInUp wow" style="animation-delay: 0.55s;"> <div><img class="img-responsive" src="http://img.autobytel.com/car-reviews/autobytel/126338-10-best-v-8-muscle-cars-for-2015/10-Best-V-8-Muscle-Cars-for-2015.jpg" alt="read our inventorys"></div> <h4>VIEW OUR INVENTORY</h4> <p>X Motors believes in fair prices, superior service, and treating customers right leads to satisfied repeat buyers. <strong>more...</strong></p> <p class="hide">X Motors believes in fair prices, superior service, and treating customers right leads to satisfied repeat buyers. </p> <div class="col-sm-12 inventorys "> <a href="/" class="btn">view inventory</a> </div> </div> <div class="col-sm-3 financing animated zoomInUp wow" style="animation-delay: 0.1s;"> <div><img class="img-responsive" src="http://img.autobytel.com/car-reviews/autobytel/125088-10-cute-cars-for-2015/10-Cute-Cars-For-2015.jpg" alt="financing available"></div> <h4>FINANCING AVAILABLE</h4> <p>We are pleased to offer a variety of financing options. Please call for more personal detailed financing information. </p> <div class="col-sm-12 financing"> <a href="/" class="btn ">get financed</a> </div> </div> <div class="col-sm-3 sellUs animated zoomInUp wow" style="animation-delay: 0.25s;"> <div><img class="img-responsive" src="http://img.autobytel.com/car-reviews/autobytel/125187-the-most-beautiful-cars-of-2015/The-Most-Beautiful-Cars-of-2015.jpg" alt="want to sell your car"></div> <h4>SELL US YOUR CAR</h4> <p>Call: <strong class="red"><a href="tel: xxx.xxx.xxxx ">xxx.xxx.xxxx</a></strong> To get an offer for your car, bring it to X Motors and we will appraise your vehicle.</p> <div class="col-sm-12 sellUs "> <a href="/" class="btn">sell car</a> </div> </div> </div>

.FourSections { padding: 10px 0px 10px 0px; } .FourSections .col-sm-3 { padding: 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #fff; border: solid 1px #cbcbcb; transition: all .20s ease-in-out; } .FourSections .col-sm-3 .btn { font-family: "Droid Sans"; font-size: 14px; font-weight: bold; color: #333330; text-shadow: 1px 1px rgba(167,168,170,.75); transition: all .20s ease-in-out; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; background-color: #d4d8d9; -webkit-box-shadow: inset 0 0 1px rgba(255,255,255,.75); -moz-box-shadow: inset 0 0 1px rgba(255,255,255,.75); box-shadow: inset 0 0 1px rgba(255,255,255,.75); border: solid 1px #868686; } .FourSections .col-sm-3:hover .btn { transform: scale(1.1); background-color: #f33636; background: #f33636; } .FourSections .col-sm-3:hover { background-color: #f33636; background: #f33636; z-index: 1; } .FourSections .col-sm-3:hover h4{ margin-top:-30px; } .FourSections .col-sm-3:hover p.hide { display:inline-block !important; } .FourSections .col-sm-3:hover p strong { display:inline-block !important; } .FourSections .col-sm-3 img, .FourSections .col-sm-3 h4 { transition: all .30s ease-in-out; margin: 0 auto; } .FourSections .col-sm-3:hover img { transform: scale(0.6); margin-top: -30px; } .FourSections .col-sm-3:hover { background-color: #E2E6EC; } .FourSections strong.red { color: #e83232; font-size: 1.3em; }