<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 banner">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3 block-img-l">
<img class="left-img animated fadeInLeft" src="http://mnsone.esy.es/smp.pp.ua/images/web.png" alt="web">
</div>
<div class="col-md-6 col-sm-6 col-xs-6 block-img-c">
<img class="center-img animated fadeInDown" src="http://mnsone.esy.es/smp.pp.ua/images/seo.png" alt="seo">
</div>
<div class="col-md-3 col-sm-3 col-xs-3 block-img-r">
<img class="right-img animated fadeInRight" src="http://mnsone.esy.es/smp.pp.ua/images/design.png" alt="design">
</div>
</div>
</div>
.banner { /*del it*/
margin-top: 50px;
}
.block-img-l, .block-img-r, .block-img-c {
padding: 0;
margin: 0;
}
.left-img {
box-shadow: 0 0 20px rgba(0,0,0,0.3);
border-radius: 1px;
width: 460px;
margin-left: 70px;
margin-top: 70px;
animation-delay: .7s;
-webkit-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
}
.left-img:hover {
box-shadow: 0 0 30px rgba(0,0,0,0.3);
margin-left: 1px;
-webkit-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
}
.right-img {
box-shadow: 0 0 20px rgba(0,0,0,0.3);
border-radius: 1px;
width: 460px;
float: right;
margin-right: 70px;
margin-top: 70px;
animation-delay: 1s;
-webkit-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
}
.right-img:hover {
box-shadow: 0 0 30px rgba(0,0,0,0.3);
margin-right: 1px;
-webkit-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
}
.center-img {
box-shadow: 0 0 30px rgba(0,0,0,0.3);
border-radius: 2px;
width: 100%;
-webkit-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
}
.center-img:hover {
box-shadow: 0 0 40px rgba(0,0,0,0.3);
-webkit-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
}
.block-img-c {
z-index: 1;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.block-img-l {
-webkit-transform: rotateZ(-1.5deg);
-ms-transform: rotateZ(-1.5deg);
transform: rotateZ(-1.5deg);
-webkit-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
}
.block-img-l:hover {
-webkit-transform: rotateZ(-4deg);
-ms-transform: rotateZ(-4deg);
transform: rotateZ(-4deg);
-webkit-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
}
.block-img-r {
-webkit-transform: rotateZ(1.5deg);
-ms-transform: rotateZ(1.5deg);
transform: rotateZ(1.5deg);
-webkit-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
}
.block-img-r:hover {
-webkit-transform: rotateZ(4deg);
-ms-transform: rotateZ(4deg);
transform: rotateZ(4deg);
-webkit-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
}
@media screen and (max-width: 1200px) {
.left-img {width: 380px;}
.right-img {width: 380px;}
}
@media screen and (max-width: 992px) {
.left-img {width: 270px;}
.right-img {width: 270px;}
}
@media screen and (max-width: 770px) {
.left-img {width: 250px;}
.right-img {width: 250px;}
}
@media screen and (max-width: 678px) {
.left-img {margin-left: 50px;}
.right-img {margin-right: 50px;}
.left-img {width: 200px;}
.right-img {width: 200px;}
}
@media screen and (max-width: 638px) {
.left-img {margin-left: 20px;}
.right-img {margin-right: 20px;}
.left-img {width: 150px;}
.right-img {width: 150px;}
}
@media screen and (max-width: 578px) {
.left-img {margin-left: 0px;}
.right-img {margin-right: 0px;}
}
@media screen and (max-width: 388px) {
.left-img {width: 100px;}
.right-img {width: 100px;}
}
http://mnsone.esy.es/smp.pp.ua/images/web.png
