"working as (clean CSS)"
Bootstrap 3.3.0 Snippet by MNsone

<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-fluid" id="content"> <div class="container"> <h2>Must connect "animate css"</h2> <hr> <div class="line animated mov" style="animation-delay: 1s"></div> <div class="row"> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 circle"> <div class="margin animated flipInX"><img src="http://mnsone.esy.es/smp.pp.ua/images/survey.png" alt="step 1"></div> <h4 class="animated fadeInUp hov">Отримуємо замовлення</h4> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 circle"> <div class="margin animated flipInX" style="animation-delay: .2s"><img src="http://mnsone.esy.es/smp.pp.ua/images/search.png" alt="step 2"></div> <h4 class="animated fadeInUp hov">Аналізуємо і консультуємо</h4> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 circle"> <div class="margin animated flipInX" style="animation-delay: .4s"><img src="http://mnsone.esy.es/smp.pp.ua/images/idea.png" alt="step 3"></div> <h4 class="animated fadeInUp hov">Визначаємо напрямки робіт</h4> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 circle"> <div class="margin animated flipInX" style="animation-delay: .6s"><img src="http://mnsone.esy.es/smp.pp.ua/images/finger.png" alt="step 4"></div> <h4 class="animated fadeInUp hov">Якісно виконуємо</h4> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 circle"> <div class="margin animated flipInX" style="animation-delay: .8s"><img src="http://mnsone.esy.es/smp.pp.ua/images/ratings.png" alt="step 5"></div> <h4 class="animated fadeInUp hov">Надаємо вичерпні звіти</h4> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 circle"> <div class="margin animated flipInX" style="animation-delay: 1s"><img src="http://mnsone.esy.es/smp.pp.ua/images/hands.png" alt="step 6"></div> <h4 class="animated fadeInUp hov">Допомагаємо і надалі</h4> </div> </div> </div> </div>
/*fonts*/ @import url(https://fonts.googleapis.com/css?family=Comfortaa:400,700,300&subset=latin,cyrillic); h1, h2, h3, h4, h5, h6 { color: #455A64; font-family: 'Comfortaa', cursive; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; } #content { height: 500px; background: rgba(127, 140, 141,0.2); background: radial-gradient(ellipse farthest-side at 30px 20px, #fff, #000)); padding: 50px; text-align: center; box-shadow: 0 0 20px rgba(0,0,0,0.3); } .line { width: 1000px; height: 10px; background: rgba(0,0,0,0.1); position: absolute; margin: 95px; box-shadow: 0 0 7px rgba(0,0,0,0.3); } .circle { text-align: center; padding: 15px; } .margin { height: 167px; width: 167px; border: solid; border-radius: 50%; border-color: #ecf0f1; padding: 15px; background: #ecf0f1; box-shadow: 0 0 15px rgba(0,0,0,0.3); -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; } .margin img { width: 100%; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .hov { display: none; background: rgba(127, 140, 141,0.2); padding: 10px; padding-top: 45px; border-radius: 100px 100px 0px 0px; box-shadow: 1px 8px 15px 2px rgba(127, 140, 141,0.2); -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .margin:hover +.hov { display: block; text-shadow: 0 0 7px rgba(0,0,0,0.3); -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .margin:hover { width: 165px; height: 165px; box-shadow: 0 0 5px rgba(0,0,0,0.3); cursor: -moz-grab; cursor: -webkit-grab; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; }

Related: See More


Questions / Comments: