直接使用代码

图片素材

css代码

  <style type="text/css">
  /*联系我们*/
  .my-contact{ min-height:500px;}
  .my-contact .xia{ position:relative ;border:1px solid #ccc; border-top:none; height:auto; min-height:200px;}
  .my-contact .xia .tt{ position:absolute; top:30px; left:0; text-align:center; line-height:30px; font-size:15px; color:#000; text-align:center; width:100%; height:200px; }
  .my-contact .xia .title{ display:inline-block; }
  .my-contact .xia  img{ display:none}
  .my-contact .ab1:hover{background:url(/Public/images/contact/about_tel2.png) no-repeat center top;background-size:100% auto; color:#fff; border:none}
  .my-contact .ab2:hover{background:url(/Public/images/contact/about_address2.png) no-repeat center top;background-size:100% auto;color:#fff;border:none}
  .my-contact .ab3:hover{background:url(/Public/images/contact/about_email2.png) no-repeat center top;background-size:100% auto;color:#fff;border:none}
  .my-contact .ab4:hover{background:url(/Public/images/contact/about_code2.png) no-repeat center top;background-size:100% auto;color:#fff;border:none}
  .my-contact .xia .tt:hover{ color:#fff}
  @media (max-width: 672px) {
  .my-contact{ min-height:300px;}
  .my-contact .xia{  min-height:120px;}
  .my-contact .xia .tt{top:10px;  }
  .my-contact .xia .title { font-size:18px!important  }
  }
  </style>

HTML+JS代码

            <div class="container my-contact" >
    
       
            <div class="row ">
                 <div class="col-md-3  col-xs-6 mar-top10">
                    <div class="pad5">
                        <img src="/Public/images/contact/about_tel.png" class="up" width="100%" />
                        <div class="xia ab1" >
                            <img src="/Public/images/contact/about_tel2.png" width="100%" />
                            <p class="tt">
                           <span class="h3 title">电话</span><br/>
                            010-84187288<br/>
                            
                            </p>
                        </div>
                    </div>
                 </div>  
                 
                 <div class="col-md-3 col-xs-6 mar-top10" >
                     <div class="pad5">
                        <img src="/Public/images/contact/about_address.png" class="up" width="100%" />
                        <div class="xia ab2" >
                            <img src="/Public/images/contact/about_address2.png" width="100%" />
                            <p class="tt">
                           <span class="h3 title">公司地址</span><br/>
                            北京市东城区青龙胡同1号
                            歌华大厦9层<br/>
                            
                            </p>
                        </div>
                     </div>   
                 </div>  
                 
                  <div class="col-md-3 col-xs-6 mar-top10">
                     <div class="pad5">
                            <img src="/Public/images/contact/about_email.png" class="up" width="100%" />
                            <div class="xia ab3 " >
                                <img src="/Public/images/contact/about_email2.png" width="100%" />
                                <p class="tt">
                                 <span class="h3 title">电子邮箱</span><br/>
                               housiyu@sunbro.cn<br/>
                                
                                
                                </p>
                            </div>
                    </div>
                 </div>  
                 
                  <div class="col-md-3 col-xs-6 mar-top10">
                      <div class="pad5">
                        <img src="/Public/images/contact/about_code.png" class="up" width="100%" />
                        <div class="xia ab4">
                            <img src="/Public/images/contact/about_code2.png" width="100%" />
                            <p class="tt">
                           <span class="h3 title">邮编</span><br/>
                            100007<br/>
                           
                            
                            </p>
                        </div>
                     </div>   
                 </div>  
                 
            </div><!--row end -->
           
            
            
     </div>