Bootstrap Snippet Services Block For B2B B2C using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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="services">
                <div class="row">
                    <div class="col-md-3 col-sm-3 col-xs-12">
                        <div class="s-block">
                            <div class="s-img">
                                <img class="img-responsive" src="http://www.variedint.com/image/services/bpo/b2b.jpg">
                            </div>
                            <h5>Business to Business Services</h5>
                            <div class="shadow"></div>
                            
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-12">
                        <div class="s-block">
                            <div class="s-img">
                                <img class="img-responsive" src="http://www.variedint.com/image/services/bpo/b2c.jpg">
                            </div>
                            <h5>Business to Customer Services </h5>
                            <div class="shadow"></div>
                            
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-12">
                        <div class="s-block">
                            <div class="s-img">
                                <img class="img-responsive" src="http://www.variedint.com/image/services/bpo/support-cc.jpg">
                            </div>
                            <h5>Technical Support Services</h5>
                            <div class="shadow"></div>
                            
                        </div>
                    </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
.services .s-block{margin: 10% auto !important;text-align: center;border: 1px solid #f1f1f1;display: table;padding: 10%;transition: all .8s ease;
}
.services .s-block:hover{border: 1px solid rgb(255, 192, 0);transition: all .8s ease;cursor: pointer;}
.services .s-block .s-img img{margin: 0 auto;transition: all .8s ease;}
.services .s-block h5{padding-top: 10%;}
.services .s-block .shadow{opacity: 0;height: 15px;width: 170px;background: -webkit-radial-gradient(#666666, white, white); /* Safari 5.1 to 6.0 */background: -o-radial-gradient(#666666, white, white); /* For Opera 11.6 to 12.0 */background: -moz-radial-gradient(#666666, white, white)); /* For Firefox 3.6 to 15 */background: radial-gradient(#666666, white, white); /* Standard syntax (must be last) */transition: all .8s ease;
}
.services .s-block:hover .shadow{opacity: 1;transition: all .8s ease;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Services Block For B2B B2C"
Bootstrap 3.3.0 Snippet by faisalkhan123

Related: See More

Questions / Comments:

"Services Block For B2B B2C" Bootstrap 3.3.0 Snippet by faisalkhan123

Related: See More

Questions / Comments:

"Services Block For B2B B2C"
Bootstrap 3.3.0 Snippet by faisalkhan123