<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> <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/email-support.jpg"> </div> <h5>Email Support 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/chat-services.jpg"> </div> <h5>Chat Support 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/inbound.jpg"> </div> <h5>Inbound Calling 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/outbound.jpg"> </div> <h5>Outbound Calling Services</h5> <div class="shadow"></div> </div> </div> </div> </div>

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