直接使用代码

图片素材

无

css代码

    <style type="text/css">
/*增值服务*/
#server{ background:#f4f5f6; padding:40px 0; }
#server .ss{ padding:10px; }
#server .wenzi{ position:relative}
#server .wenzi h3{position:absolute; top:70px; left:0; width:100%; text-align:center;color:#fff;}
#server .wenzi p{ position:absolute; top:140px; left:0; width:100%; text-align:center; color:#fff; line-height:25px;}
#server .wenzi a{ color:#fff}
#server .wenzi a:visited{ color:#fff}
#server .wenzi a:hover{ color:#f60}

</style>

HTML+JS代码

  
<!--增值服务-->
<div id="server">
  <div class="container">
    <div class="row">
      <img
        src="/Public/images/demo/index1/title_fuwu.png"
        class="center-block img-responsive visible-md visible-lg"
      />
      <h3 class="text-center  visible-xs">DIY个性行程</h3>
      <br />
    </div>
   <div class="row bbottom">
      <div class="col-md-4 ss    visible-md visible-lg ">
        <img src="/Public/images/demo/index1/lxini.jpg" width="100%" />
      </div>
     <div class="col-md-4 ss   visible-xs  ">
        <img src="/Public/images/demo/index1/lxianlu.jpg" width="100%" />
      </div>
     <div class="col-md-4  ss wenzi  ">
        <img src="/Public/images/demo/index1/s3.png" width="100%" />
        <a href="__URL__/list_diy/channel/DIY行程选择/typename/精品城市线路游">
          <h3 class="green center">精品城市线路游</h3>
          <p class="center">澳洲各大城市360°深度游玩<br /></p>
        </a>
      </div>
     <div class="col-md-4 ss bleft visible-md visible-lg  ">
        <img src="/Public/images/demo/index1/lyuyan.jpg" width="100%" />
      </div>
    </div>
   <div class="row">
      <div class="col-md-4 ss    visible-xs ">
        <img src="/Public/images/demo/index1/lxini.jpg" width="100%" />
      </div>
     <div class="col-md-4  ss  wenzi ">
        <img src="/Public/images/demo/index1/s3.png" width="100%" />
        <a href="__URL__/list_diy/channel/DIY行程选择/typename/悉尼精华结伴游">
          <h3 class="green center">悉尼精华结伴游</h3>
          <p class="center">悉尼各大景点任意组合，优惠门票<br /></p>
        </a>
      </div>
      <div class="col-md-4 ss   visible-md visible-lg   ">
        <img src="/Public/images/demo/index1/lxianlu.jpg" width="100%" />
      </div>
     <div class="col-md-4 ss  visible-xs  ">
        <img src="/Public/images/demo/index1/lyuyan.jpg" width="100%" />
      </div>
     <div class="col-md-4   ss wenzi">
        <img src="/Public/images/demo/index1/s3.png" width="100%" />
        <a href="__URL__/article_article/id/14">
          <h3 class="green center">语言拓展训练</h3>
          <p class="center">“零”中文，“全”英文 课堂<br /></p>
        </a>
      </div>
    </div>
   <script type="text/javascript">
      $(function() {
        $(".wenzi").hover(
          function() {
            $(this)
              .find("img")
              .attr("src", "/Public/images/demo/index1/s5.png");
            $(this)
              .find("h3")
              .css("color", "#ff9");
            $(this)
              .find("p")
              .css("color", "#ff9");
          },
          function() {
            $(this)
              .find("img")
              .attr("src", "/Public/images/demo/index1/s3.png");
            $(this)
              .find("h3")
              .css("color", "#fff");
            $(this)
              .find("p")
              .css("color", "#fff");
          }
        );
      });
    </script>
  </div>
</div>