直接使用代码

图片素材

css代码

 <style>

/*所有按钮加渐变动画*/
.btn{-webkit-transition:all 0.225s ease-in-out;-moz-transition:all 0.225s ease-in-out;-o-transition:all 0.225s ease-in-out;transition:all 0.225s ease-in-out;}
/*所有按钮加渐变动画*/
/*幽灵按钮*/
.btn-outline-inverse{color:#fff;background:transparent;border-color:#fff;}
.btn-outline-inverse:hover{color:#0ba1e4;text-shadow:none;background-color:#fff;}
.btn-outline-blue{color:#0ba1e4;background:transparent;border-color:#0ba1e4;}
.btn-outline-blue:hover{color:#fff;text-shadow:none;background-color:#0ba1e4;}
/*首页-行板块*/
.index-row{padding:50px 0;}
.index-row .main-title{text-align:center;margin-bottom:30px;}
/*首页-行板块*/
/*首页-我们的服务*/
/*手机超小屏幕下的单独样式 xs < 768px */
@media (max-width:767px){.card-item{width:100% !important;margin-top:20px;}
.card-area .card-active{-webkit-transform:scale(1) !important;-moz-transform:scale(1) !important;;-o-transform:scale(1) !important;;-ms-transform:scale(1) !important;;z-index:10 !important;}
}
.our-service{background-color:#ffffff;}
.card-box{padding-top:20px;padding-bottom:60px;}
.card-area{padding:0;margin:0;-webkit-margin-before:0px;-webkit-margin-after:0px;-webkit-margin-start:0px;-webkit-margin-end:0px;-webkit-padding-start:0px;}
.card-area .card-item{float:left;position:relative;list-style:none;width:25%;background-color:#fafafa;border:1px solid #c1c1c1;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.card-area .card-item .card-title{padding-top:20px;padding-bottom:20px;border-bottom:1px solid #c1c1c1;}
.card-area .card-item .card-title h4{font-weight:bold;color:#0ba1e4;}
.card-area .card-item .card-title h4,.card-area .card-item .card-title p{margin:0;line-height:2em;}
.card-area .card-item .card-content{padding-top:20px;padding-bottom:30px;}
.card-area .card-item .card-content p{line-height:3em;}
.card-area .card-item .card-content a{padding-left:20px;padding-right:20px;}
.card-area .card-active{background-color:#0ba1e4;border:1px solid #0ba1e4;box-shadow:0 0 20px 0 rgba(45,183,245,.5);color:#fff;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);z-index:11;}
.card-area .card-active .card-title{border-color:#ffffff;}
.card-area .card-active .card-title h4{color:#fff;}
/*首页-我们的服务*/
</style>

HTML+JS代码

 
<!-- 我们的服务 -->
<section class="index-row our-service">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 main-title">
        <h2 class="h1">我们的服务</h2>

        <p class="line line-big"></p>

        <h2>
          <small>与美国非移民签证申请相关的所有服务，我们都提供支持。</small>
        </h2>
      </div>
      <div class="col-sm-12 text-center card-box">
        <ul class="card-area">
          <li class="card-item card-active">
            <div class="card-title">
              <h4>美国加急预约</h4>

              <p>全程加急办理</p>

            </div>
            <div class="card-content">
              <p>3个工作日内进馆</p>

              <p>先加急 后付费</p>

              <p>100%加急成功</p>

              <p>支持全国五大领区</p>

              <p>支持所有签证类型</p>
              <a href="http://www.bootfastui.cn"
                class="btn btn-outline-inverse">查看详情</a>

            </div>
          </li>
          <li class="card-item">
            <div class="card-title">
              <h4>美国商务签证</h4>

              <p>B1/B2商务</p>
            </div>
            <div class="card-content">
              <p>10年多次往返</p>

              <p>一对一方案定制</p>

              <p>申请材料指导</p>

              <p>面签培训</p>

              <p>全程解答所有疑问</p>
              <a href="http://www.bootfastui.cn" class="btn btn-outline-blue">查看详情</a>
            </div>
          </li>
          <li class="card-item">
            <div class="card-title">
              <h4>美国免面签</h4>

              <p>免面试中信代传递</p>
            </div>
            <div class="card-content">
              <p>简单申请材料</p>

              <p>无须进馆面试</p>

              <p>B1/B2十年有效</p>

              <p>可加急申请</p>

              <p>全流程服务</p>
              <a href="http://www.bootfastui.cn" class="btn btn-outline-blue">查看详情</a>
            </div>
          </li>
          <li class="card-item">
            <div class="card-title">
              <h4>美国留学签证</h4>

              <p>F1/F2留学陪读</p>
            </div>
            <div class="card-content">
              <p>签证方案咨询</p>

              <p>申请材料指导</p>

              <p>代缴SEVIS费</p>

              <p>面签培训</p>

              <p>可加急办理</p>
              <a href="http://www.bootfastui.cn" class="btn btn-outline-blue">查看详情</a>
            </div>
          </li>
        </ul>
        <div class="clearfix"></div>
      </div>
      <div class="col-sm-12 text-center">
        <a href="http://www.bootfastui.cn"
          class="btn btn-outline-blue btn-lg">查看更多服务</a>
      </div>
    </div>
  </div>
</section>
<script>
  $(function () {
    //首页-我们的服务
    $('.card-item').each(function () {
      $(this).mouseover(function () {
        $(this).addClass('card-active');
        $(this).siblings().removeClass('card-active');
        $(this).find(".btn").addClass('btn-outline-inverse').removeClass('btn-outline-blue');
        $(this).siblings().find(".btn").addClass('btn-outline-blue').removeClass('btn-outline-inverse');
      });
    });

  })
</script>