<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-lg-3 col-sm-6"> <div class="counter-box"> <div class="box-content"> <h2 class="count">423</h2> <p class="title">Projects</p> </div> </div> </div> <div class="col-lg-3 col-sm-6"> <div class="counter-box"> <div class="box-content"> <h2 class="count">9</h2> <p class="title">Years experts</p> </div> </div> </div> <div class="col-lg-3 col-sm-6"> <div class="counter-box"> <div class="box-content"> <h2 class="count">50</h2> <p class="title">Clients</p> </div> </div> </div> <div class="col-lg-3 col-sm-6"> <div class="counter-box"> <div class="box-content"> <h2 class="count">16587</h2> <p class="title">Image</p> </div> </div> </div> </div> </div>

.row{ padding: 3rem 0; } .counter-box{ text-align: center; position: relative; } .counter-box .box-content{ position: relative; padding: 1.5rem 3rem; } .counter-box:before, .counter-box:after{ content: ""; width: 50px; height: 50px; position: absolute; opacity: 1; transition: all 0.6s ease 0.3s; } .counter-box:before{ border-bottom: 10px solid #040404; border-left: 10px solid #040404; bottom: 0px; left: 0px; } .counter-box:after{ border-bottom: 10px solid #040404; border-right: 10px solid #040404; bottom: 0px; right: 0px; } .counter-box:hover:before, .counter-box:hover:after{ width: 50%; height: 50%; } .counter-box .box-content:before, .counter-box .box-content:after{ content: ""; width: 50px; height: 50px; position: absolute; opacity: 1; transition: all 0.6s ease 0.3s; } .counter-box .box-content:before{ border-left: 10px solid #040404; border-top: 10px solid #040404; top: 0px; left: 0px; } .counter-box .box-content:after{ border-top: 10px solid #040404; border-right: 10px solid #040404; top: 0px; right: 0px; } .counter-box:hover .box-content:before, .counter-box:hover .box-content:after{ width: 50%; height: 50%; } .counter-box .count{ font-size: 62px; font-weight: bold; } .counter-box .title{ font-size: 20px; color: #000; margin: 0; position: relative; transition: all 1s ease 0.01s; } .counter-box:hover .title{ opacity: 1; transition: all 0.5s cubic-bezier(1, -0.53, 0.405, 1.425) 0.01s; } .counter-box .title:after{ content: ""; width: 0; height: 1px; background: #040404; position: absolute; bottom: -8px; left: 0; right: 0; margin: 0 auto; transition: all 1s ease 0s; } .counter-box:hover .title:after{ width: 80%; transition: all 1s ease 0.8s; }