<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"> <h1>Animated effects</h1> <div class="col-lg-4 col-md-4 col-sm-4"> <p class="b-box box-rt"><i>iPhone 6s</i></p> <p class="b-box box-rt"><i>3D Touch</i></p> <p class="b-box box-rt"><i>Touch ID</i></p> </div> <div class="col-lg-4 col-md-4 col-sm-4"><img src="https://media.giphy.com/media/nWSN2DJtRyfqo/giphy.gif" alt="enki-mobile" width="100%" class="aligncenter size-medium wp-image-2402"><br> </div> <div class="col-lg-4 col-md-4 col-sm-4"> <p class="b-box box-lf"><i>Website</i></p> <p class="b-box box-lf"><i>A9 chip</i></p> <p class="b-box box-lf"><i>Apps</i></p> </div> </div> </div>

@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,900,800,700,600); body { font-family: 'Raleway', sans-serif; } .row { display: -webkit-box; } .row:before, .row:after { display: table; content: " "; } h1 { border-bottom: 10px solid red; font-family: "Raleway", sans-serif; font-size: 65px; font-weight: 900; margin: 0 auto 60px; padding: 20px 0 3px; text-align: center; text-transform: uppercase; width: 55.2%; } .col-md-4 { width: 33.33333333333333%; text-align: center; } .row:before, .row:after { display: table; content: " "; } .b-box { background: #ebebeb; border: 13px solid #d4d4d4; border-radius: 50%; color: #666; display: table; font-size: 0.9em; height: 150px; line-height: 22px; margin: 52px auto; padding: 0 10px; position: relative; text-align: center; vertical-align: middle; cursor: pointer; width: 150px; } .b-box:hover { background: #d4d4d4 none repeat scroll 0 0; border: 13px solid #ebebeb; } .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 { border-bottom: 2px solid #666; content: ""; height: 1px; left: 150px; position: absolute; top: 50%; width: 130px; } .box-lf:hover::after { content: ""; position: absolute; left: -129px; top: 50%; height: 1px; width: 130px; border-bottom: 2px solid #666; } .b-box i { color: black; display: table-cell; font-size: 14px; text-transform: uppercase; vertical-align: middle; font-style: normal; font-weight: 600; color: #3f3e3e; }