<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;
}
