"windowholder (clean CSS)"
Bootstrap 3.3.0 Snippet by MohamedSamiKhiari

<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

Related: See More


Questions / Comments: