<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="container"> <div class="row"> <a class="navlinks" href="http://adformcreative.com/company"><div class="col-xs-12 col-sm-2 company"><img class="img-responsive center-block" src="http://adformcreative.com/wp-content/themes/meris/images/company-icon.png" alt="Company"/><p class="text-center navtext">Company</p></div></a> <a class="navlinks" href="http://adformcreative.com/capabilities"><div class="col-xs-12 col-sm-2 capabilities"><img class="img-responsive center-block" src="http://adformcreative.com/wp-content/themes/meris/images/capabilities-icon.png" alt="Capabilities"/><p class="text-center navtext">Capabilities</p></div></a> <a class="navlinks" href="http://adformcreative.com/branding-tools"><div class="col-xs-12 col-sm-2 branding"><img class="img-responsive center-block" src="http://adformcreative.com/wp-content/themes/meris/images/branding-icon.png" alt="Branding Tools"/><p class="text-center navtext">Branding Tools</p></div></a> <a class="navlinks" href="http://adformcreative.com/creative-lounge"> <div style="padding-bottom: 2px;" class="col-xs-12 col-sm-2 creativelounge"><img class="img-responsive center-block" src="http://adformcreative.com/wp-content/themes/meris/images/creative-lounge.png" alt="Creative Lounge"/><p class="text-center navtext">Creative Lounge</p></div></a> <a class="navlinks" href="http://adformcreative.com/customer-care"><div class="col-xs-12 col-sm-2 customercare"><img class="img-responsive center-block" src="http://adformcreative.com/wp-content/themes/meris/images/customer.png" alt="Customer Care"/><p class="text-center navtext">Customer Care</p></div></a> </div> </div> </div> </div> </div> </div>

p.navtext { font-family:Tahoma; color: white; font-size: 1.5rem; } img { padding: 5px; } .company { background-color: #16225f; } .capabilities { background-color: #80BD00; } .branding { background-color: #00A1E1; } .creativelounge { background-color: #FC4F00; } .customercare { background-color: #932749; } .panel-heading { background: #000; } .centered-form{ margin-top: 60px; } .centered-form .panel{ background: #e9e9e9; } /*Circle*/ .navlinks div { position: relative; } .navlinks div::before { position: absolute; top: 50%; left: 50%; z-index: 2; display: block; content: ''; width: 0; height: 0; background: rgba(255,255,255,.2); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } .navlinks div:hover::before { -webkit-animation: circle .75s; animation: circle .75s; } @-webkit-keyframes circle { 0% { opacity: 1; } 40% { opacity: 1; } 100% { width: 120%; height: 120%; opacity: 0; } } @keyframes circle { 0% { opacity: 1; } 40% { opacity: 1; } 100% { width: 120%; height: 120%; opacity: 0; } }