<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="row"><div class="col-md-4"><p class="b-box box-rt"><i>Label One</i></p> <p class="b-box box-rt"><i>Label Two</i></p> <p class="b-box box-rt"><i>Label Three</i></p></div> <div class="col-md-4"><img src="http://www.swapnilchafale.com/images/hire_Swapnil_chafale.gif" alt="enki-mobile" width="100%" style="padding-top:30px" class="aligncenter size-medium wp-image-2402"><br></div> <div class="col-md-4 "><p class="b-box box-lf"><i>Label Five</i></p> <p class="b-box box-lf"><i>Label Six</i></p> <p class="b-box box-lf"><i>Label Seven</i></p></div></div>

.row{display: -webkit-box;} .row:before, .row:after { display: table; content: " "; } .col-md-4 { width: 33.33333333333333%; text-align: center; } .row:before, .row:after { display: table; content: " "; } .b-box{ height: 60px; width: 230px; border: 2px solid #666; color: #666; text-align: center; margin: 30px auto; vertical-align: middle; position: relative; line-height: 22px; font-size: .9em; border-radius: 5px; display: table; padding: 0px 10px;} .box-rt::before{ content: ""; position: absolute; left: 228px; top: 50%; height: 1px; width: 0px; border-bottom: 2px solid #666; transition: all .3s ease; } .box-lf::after { content: ""; position: absolute; left: 0px; top: 50%; height: 1px; width: 0px; border-bottom: 2px solid #666; transition: all .3s ease; } .box-rt:hover::before{ content: ""; position: absolute; left: 228px; top: 50%; height: 1px; width: 130px; border-bottom: 2px solid #666; } .box-lf:hover::after { content: ""; position: absolute; left: -132px; top: 50%; height: 1px; width: 130px; border-bottom: 2px solid #666; } .b-box i{display: table-cell; vertical-align: middle;}