直接使用代码

图片素材

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

css代码

 <style>
.com-index-title{text-align:center; padding-top:60px; margin:0 auto;}
.com-index-title span {border:#81d8cf solid 1px; width:150px; display:inline-block;font-size:22px; line-height:45px; color:#81d8cf}
.tit { text-align:center; font-size:30px; color:#81d8cf }
.tit1{text-align:center; font-size:9px; text-transform: uppercase;color:#81d8cf; margin-bottom:40px; }
.tit1 span { letter-spacing:5px;font-size:20px;}


/* 协会服务--定位图像 */
#index-service .item-img{margin-bottom:30px}
#index-service .item-img a{display:block;position: relative;  height:340px; border-radius:8px;cursor: pointer;}

#index-service .item-img h4{position:absolute; top:120px;z-index:3;width:100%;text-align:center;font-size:40px;color:#FFF; letter-spacing:10px;text-shadow: 2px 2px 5px #eee;}
#index-service .item-img .front img{border-radius: 12px;}

#index-service .front{position: relative;overflow: hidden;border-radius:10px;width: 556px;height:340px;}
#index-service .front .zhezhao{width: 556px;height:340px;background:#000;filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity: 0.7; opacity: 0.7;position: absolute;top:-340px;left:0;color:#fff}
#index-service .front .zhezhao{text-align: center;}
#index-service .front .zhezhao h2{color:#fff;margin-top:120px;font-size:40px;}

</style>

HTML+JS代码

 
<div id="index-service">
  <div class="container">
    <h2 class="com-index-title">
          <span>协会宗旨</span>
      </h2>
      <p class="tit">——</p>
      <p class="tit1"><span>推动行业健康良性发展</span><br>Promote healthy and healthy development of the industry your parents peace of mind</p>

    <div class="row">
      <div class="col-md-6">
        <div class="item-img colo">
          <a href="http://www.bootfastui.cn" class="card" target="_blank">
            <!-- <h4>艺培排名</h4> -->
            <div class="front">
              <img src="http://www.bootfastui.cn/img/2021/0329-5/index11.jpg" width="100%" />
              <div class="zhezhao">
                <h2>机构排名</h2>
                <h3>家长为孩子报班指南</h3>
              </div>

            </div>
         
          </a>
        </div>
      </div>
      <div class="col-md-6">
        <div class="item-img colo1">
          <a href="http://www.bootfastui.cn" class="card" target="_blank">
            <!-- <h4>艺考成绩</h4> -->
            <div class="front">
              <img src="http://www.bootfastui.cn/img/2021/0329-5/index2.jpg" width="100%" />
              <div class="zhezhao">
                <h2>艺考成绩查询</h2>
                <h3>艺考机构真实成绩查询</h3>
              </div>

            </div>

          </a>
        </div>
      </div>

      <div class="col-md-6">
        <div class="item-img colo1">
          <a href="http://www.bootfastui.cn" class="card" target="_blank">
            <!-- <h4>艺考成绩</h4> -->
            <div class="front">
              <img src="http://www.bootfastui.cn/img/2021/0329-5/index3.jpg" width="100%" />
              <div class="zhezhao">
                <h2>艺考成绩查询</h2>
                <h3>艺考机构真实成绩查询</h3>
              </div>

            </div>

          </a>
        </div>
      </div>

      <div class="col-md-6">
        <div class="item-img colo1">
          <a href="http://www.bootfastui.cn" class="card" target="_blank">
            <!-- <h4>艺考成绩</h4> -->
            <div class="front">
              <img src="http://www.bootfastui.cn/img/2021/0329-5/index4.jpg" width="100%" />
              <div class="zhezhao">
                <h2>艺考成绩查询</h2>
                <h3>艺考机构真实成绩查询</h3>
              </div>

            </div>

          </a>
        </div>
      </div>
      <script>
        $(function () {
          $('.front').hover(function () {
            $(this).find('.zhezhao').animate({ top: '0' }, "normal");
          }, function () {
            $(this).find('.zhezhao').animate({ top: '-340px' });
          })
        })
      </script>
    </div>
  </div>
</div>