<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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"> <div class="col-md-4 service-box"> <figure class="icon"> <span class="glyphicon3 glyphicon-time" aria-hidden="true"></span> </figure> </div> <div class="col-md-4 service-box"> <figure class="icon"> <span class="glyphicon3 glyphicon-time" aria-hidden="true"></span> </figure> </div> <div class="col-md-4 service-box"> <figure class="icon"> <span class="glyphicon3 glyphicon-time" aria-hidden="true"></span> </figure> </div> </div> </div>

.service-box{ margin-top:50px; } .icon { width: 100px; height: 100px; border-radius: 50%; background: #f43c60; margin: 0 auto; text-align: center; position: relative; } .service-box:hover .icon:before { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .service-box .icon:before { content: ''; width: 102%; height: 102%; border-radius: 50%; background: #dfdfdf; position: absolute; top: -1px; left: -1px; z-index: 10; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); transition: all 0.3s ease 0s; } .glyphicon3 { position: relative; top: 33px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; left: 0px; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; z-index: 999; } .glyphicon-time:before, .glyphicon-edit:before { color: #fff; font-size: 36px; } .glyphicon-time:before { content: "\e023"; }