Our Programs

直接使用代码

图片素材

点击下载本素材所包含的图片，js文件

css代码

 <style>
/*program210525s 内容*/
#program210525 { margin:0 auto; padding:0;}
#program210525  h2{ margin:0 auto; padding:0; text-align:center; font-size:40px; font-weight:400; margin-bottom:20px;}
#program210525 .kuai{ margin:10px -5px; position:relative}
#program210525 .kuai .opacity,#program210525 .kuai .opacity2{ position:absolute; top:0; left:0; z-index:100; max-height:253px}
#program210525 .kuai .opacity{ display:none}
#program210525 .kuai h5{ position:absolute; top:30px; left:0; width:100%; color:#fff; text-align:center; z-index:200; font-size:20px}
#program210525 .kuai .jia{ width:40px; height:40px; line-height:35px; text-align:center; position:absolute; z-index:999; bottom:20px; left:170px; background:#096; color:#fff; font-size:40px;opacity:0.6; border-radius:6px;}
#program210525 .kuai:hover .jia{ background:#F90}
#program210525 .kuai:hover .opacity2{ display:none}
#program210525 .kuai:hover .opacity{ display:block}
</style>

HTML+JS代码

 
<!--内容-->
<section id="program210525" class="container">
  <h1 class="com-h1 text-center">Our Programs</h1>

  <div class="row">
    <div class="col-md-4 ">
      <div class="kuai">
        <a href="http://www.bootfastui.cn">
          <img src="http://www.bootfastui.cn/img/2021/0525-3/5abda6296a461.jpg" width="100%" class="tu" />
          <img src="http://www.bootfastui.cn/img/2021/0525-3/bg_pro.png" width="100%" class="opacity" />
          <img src="http://www.bootfastui.cn/img/2021/0525-3/bg_pro2.png" width="100%" class="opacity2" />
          <h5>Volunteer in Australia</h5>

          <div class="jia">+</div>
        </a>
      </div>

    </div>
    <div class="col-md-4 ">
      <div class="kuai">
        <a href="http://www.bootfastui.cn">
          <img src="http://www.bootfastui.cn/img/2021/0525-3/5abda6296a461.jpg" width="100%" class="tu" />
          <img src="http://www.bootfastui.cn/img/2021/0525-3/bg_pro.png" width="100%" class="opacity" />
          <img src="http://www.bootfastui.cn/img/2021/0525-3/bg_pro2.png" width="100%" class="opacity2" />
          <h5>Work and Holiday</h5>

          <div class="jia">+</div>
        </a>
      </div>

    </div>
    <div class="col-md-4 ">
      <div class="kuai">
        <a href="http://www.bootfastui.cn">
          <img src="http://www.bootfastui.cn/img/2021/0525-3/5abda6296a461.jpg" width="100%" class="tu" />
          <img src="http://www.bootfastui.cn/img/2021/0525-3/bg_pro.png" width="100%" class="opacity" />
          <img src="http://www.bootfastui.cn/img/2021/0525-3/bg_pro2.png" width="100%" class="opacity2" />
          <h5>Study Tours in Australia</h5>

          <div class="jia">+</div>
        </a>
      </div>

    </div>
    <div class="col-md-4 ">
      <div class="kuai">
        <a href="http://www.bootfastui.cn">
          <img src="http://www.bootfastui.cn/img/2021/0525-3/5abda6296a461.jpg" width="100%" class="tu" />
          <img src="http://www.bootfastui.cn/img/2021/0525-3/bg_pro.png" width="100%" class="opacity" />
          <img src="http://www.bootfastui.cn/img/2021/0525-3/bg_pro2.png" width="100%" class="opacity2" />
          <h5>Hospitality Internship</h5>

          <div class="jia">+</div>
        </a>
      </div>

    </div>
    <div class="col-md-4 ">
      <div class="kuai">
        <a href="http://www.bootfastui.cn">
          <img src="http://www.bootfastui.cn/img/2021/0525-3/5abda6296a461.jpg" width="100%" class="tu" />
          <img src="http://www.bootfastui.cn/img/2021/0525-3/bg_pro.png" width="100%" class="opacity" />
          <img src="http://www.bootfastui.cn/img/2021/0525-3/bg_pro2.png" width="100%" class="opacity2" />
          <h5>Teach Abroad</h5>

          <div class="jia">+</div>
        </a>
      </div>

    </div>
    <div class="col-md-4 ">
      <div class="kuai">
        <a href="http://www.bootfastui.cn">
          <img src="http://www.bootfastui.cn/img/2021/0525-3/5abda6296a461.jpg" width="100%" class="tu" />
          <img src="http://www.bootfastui.cn/img/2021/0525-3/bg_pro.png" width="100%" class="opacity" />
          <img src="http://www.bootfastui.cn/img/2021/0525-3/bg_pro2.png" width="100%" class="opacity2" />
          <h5>Education &amp; Culture Exchange</h5>

          <div class="jia">+</div>
        </a>
      </div>

    </div>
  
  </div>
  <!--row end-->

</section>