直接使用代码

图片素材

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

css代码

 <style>

<div class="container">
  <div class="about-tese">
    <img src="http://www.bootfastui.cn/img/2021/0328-7/tese.jpg" width="100%" />
    <div class="t-content">
      <div class="tese-item">
        以德修艺的课程理念
      </div>
      <div class="tese-item">
        多媒体可视化教学
      </div>
      <div class="tese-item">
        标准系统化课程体系
      </div>
      <div class="clear"></div>
      <div class="tese-item">
        多元兴趣化教学互动
      </div>
      <div class="tese-item">
        配套的家校APP
      </div>
      <div class="tese-item">
        强大的研发团队
      </div>
    </div>
  </div>

</div> 
</style>

HTML+JS代码

 .about-tese{position: relative;}
.about-tese .t-content{position: absolute; width:1000px;top:200px;left:120px;}
.about-tese .t-content .tese-item{width:250px;margin:30px;border-left:10px solid #199ed8;line-height: 60px;font-size:18px;padding-left:15px;color:#fff;float:left;background:rgba(54, 40, 40, 0.6);  transition: all .3s;text-align: center;}
.about-tese .t-content .tese-item:hover{   margin-top: 22px;
    margin-bottom:38px;}