直接使用代码

图片素材

css代码

 <style>

/*合伙人计划*/
#index_hehuo .kuai{ position:relative; margin:5px;}
#index_hehuo .kuai .lan{ position:absolute; top:0; left:0; color:#fff; width:100%;}
#index_hehuo .kuai h2{ position:absolute; top:30px; left:15px; color:#fff}
#index_hehuo .kuai h3{ position:absolute; top:80px; left:15px; color:#fff}
#index_hehuo .kuai:hover .lan{ display:none; }

@media screen and (max-width: 2700px){
#index_hehuo .kuai h2{ position:absolute; top:30px; left:15px; color:#fff}
#index_hehuo .kuai h3{ position:absolute; top:80px; left:15px; color:#fff}
}

@media screen and (max-width: 738px) {
#index_hehuo .kuai h2{ position:absolute; top:30px; left:15px; color:#fff; font-size:16px}
#index_hehuo .kuai h3{ position:absolute; top:50px; left:15px; color:#fff; font-size:14px}
}

</style>

HTML+JS代码

 
<!--合伙人计划-->
<h1><img src="http://www.bootfastui.cn/img/2021/0521-3/index_title_hehuo.jpg" class="center-block"/></h1>
<div class="container" id="index_hehuo">

   <div class="col-md-3   col-xs-6">
       <div class="kuai">
           <img src="http://www.bootfastui.cn/img/2021/0521-3/index_hehuo1.jpg"  width="100%"/>
           <img src="http://www.bootfastui.cn/img/2021/0521-3/bg_lan.png"  width="100%" class="lan"/>
           <h2>品牌授权</h2>
           <h3>代理签订协议</h3>
       </div>
   </div>
   
    <div class="col-md-3   col-xs-6">
       <div class="kuai">
           <img src="http://www.bootfastui.cn/img/2021/0521-3/index_hehuo2.jpg"  width="100%"/>
           <img src="http://www.bootfastui.cn/img/2021/0521-3/bg_lan.png"  width="100%" class="lan"/>
           <h2>享受 结算价</h2>
           <h3>享受办事处结算价</h3>
       </div>
   </div>
   
    <div class="col-md-3   col-xs-6">
       <div class="kuai">
           <img src="http://www.bootfastui.cn/img/2021/0521-3/index_hehuo3.jpg"  width="100%"/>
           <img src="http://www.bootfastui.cn/img/2021/0521-3/bg_lan.png"  width="100%" class="lan"/>
          
            <h2>全方位指导</h2>
           <h3>全方位指导支持</h3>
       </div>
   </div>
   
    <div class="col-md-3   col-xs-6">
       <div class="kuai">
           <img src="http://www.bootfastui.cn/img/2021/0521-3/index_hehuo4.jpg"  width="100%"/>
           <img src="http://www.bootfastui.cn/img/2021/0521-3/bg_lan.png"  width="100%" class="lan"/>
           <h2>零成本零压力</h2>
           <h3>零成本零压力高回报</h3>
       </div>
   </div>
   
 </div>