<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" id="features"> <div class="row"> <div class="col-md-6 feature"> <i class="glyphicon glyphicon-picture"></i> <h3>Lorem ipsum dolor</h3> <div class="title_border"></div> <p>Praediximus enim Montium sub ipso vivendi termino his vocabulis appellatos fabricarum culpasse tribunos ut adminicula futurae molitioni pollicitos</p> <div class="rows"> <div class="col-md-3 feature"> <i class="glyphicon glyphicon-globe"></i> <h3>Lorem ipsum dolor</h3> <div class="title_border"></div> <p>pollicitos</p> </div> <div class="col-md-3 feature"> <i class="glyphicon glyphicon-globe"></i> <h3>Lorem ipsum dolor</h3> <div class="title_border"></div> <p>pollicitos</p> </div> <div class="col-md-3 feature"> <i class="glyphicon glyphicon-briefcase"></i> <h3>Lorem ipsum dolor</h3> <div class="title_border"></div> <p>pollicitos</p> </div> <div class="col-md-3 feature"> <i class="glyphicon glyphicon-briefcase"></i> <h3>Lorem ipsum dolor</h3> <div class="title_border"></div> <p>pollicitos</p> </div> </div> <div class="rows"> <div class="col-md-12 feature"> <i class="glyphicon glyphicon-globe"></i> <h3>Lorem ipsum dolor</h3> <div class="title_border"></div> <p>pollicitos</p> </div> </div> </div> </div> </div>

#features { margin-top:20px; } .feature, .feature i, .feature h3, .feature .title_border { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .feature { background:#FFFFFF; text-align:center; padding:20px; border: solid 1px #cccccc; } .feature p { margin-top:20px; margin-bottom:30px; } .feature i{ font-size:20px; color:#FFFFFF; background:#1E825F; padding:10px; border-radius:50%; border: solid 3px #1E825F; } .feature h3 { color:#1E825F; } .feature:hover { background:#F5F5F5; -webkit-transform: translate(0,1em); -moz-transform: translate(0,1em); -o-transform: translate(0,1em); -ms-transform: translate(0,1em); transform: translate(0,1em); } .feature:hover i{ color:#1E825F; border-color:#1E825F; background:#FFFFFF; } .feature:hover .title_border { background-color:#1E825F; width:50%; } .feature .title_border { width: 0%; height: 3px; background:#1E825F; margin: 0 auto; margin-top: 12px; margin-bottom: 8px; }