我们为您提供

直接使用代码

图片素材

css代码

 <style>
.page_list2 ul { overflow: hidden; }
.page_list2 ul li { width: 33.333%; float: left; text-align:center;}
.page_list2 ul li a { display: block; position: relative; }
.page_list2 ul li .img img { width: 100%; display: block; }

.page_list2 ul li .text { position: absolute; left: 5%; right: 5%; top: 50%; margin-top: -10px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page_list2 ul li .text h3 { font: bolder 20px/27px "Microsoft YaHei"; font-weight: 600; }
.page_list2 ul li .text p { line-height: 62px; border-bottom: 0px solid #000; white-space: nowrap; font: 16px/28px "Microsoft YaHei";color: #272c42; margin-top: 10px;margin-bottom: 35px; text-overflow: inherit; }
.page_list2 ul li .text span { display: none; }
</style>

HTML+JS代码

 <div class="floor_2 text-center" id="year" >
  <h2 class="floorHd_2"><img src="http://www.bootfastui.cn/img/2021/0325-2/floor2.png" alt=""></h2>
  <div class="page_list2">
    <ul>
      <li>
        <a href="#">
          <div class="img"><img src="http://www.bootfastui.cn/img/2021/0325-2/floorImg1.png" alt="精品课"></div>
          <div class="text animated more-fast fadeInUp" data-animation="fadeInUp">
            <h3>PMP项目管理认证</h3>
            <p>近20年经验授课名师助您取证<br>每天2小时轻松学习<br>由浅到深系统掌握各个项目环节<br>群内互动答疑 + 课后练习 <br>模考查漏补缺 不断复盘 把控时间 调整心态</p>
            <span></span>
          </div>
        </a>
      </li>
      <li>
        <a href="javascript:void(0)">
          <div class="img"><img src="http://www.bootfastui.cn/img/2021/0325-2/floorImg2.png" alt="针对软件行业的</br>战略性咨询服务"></div>
          <div class="text animated more-fast fadeInUp" data-animation="fadeInUp">
            <h3>PMI-ACP敏捷管理</h3>
            <p>资深名师根据考试大纲对知识点</br>高频考点进行深入讲解</br>掌握Scrum、XP、精益等敏捷实践工具</br>掌握答题技巧及判断标准</br>深入研究考题趋势，助力高效取证</p>
            <span></span>
          </div>
        </a>
      </li>
      <li>
        <a href="javascript:void(0)">
          <div class="img"><img src="http://www.bootfastui.cn/img/2021/0325-2/floorImg3.png" alt="I针对软件行业的</br>战略性咨询服务"></div>
          <div class="text animated more-fast fadeInUp" data-animation="fadeInUp">
            <h3>软考（中级、高级）</h3>
            <p>权威老师直播授课</br>1对1专属课程顾问</br>备考干货资料合集</br>高密度精华输出</br>5大课程体系帮助顺利备考</p>
            <span></span>
          </div>
        </a>
      </li>
    </ul>

  </div>
</div>