直接使用代码

图片素材

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

css代码

 <style>

.org-index-student{margin:0 -5px;}
.org-index-student .item-student{width:180.6px;height:186.6px;border-radius:10px;float:left;margin:5px;position: relative;overflow:hidden}
.org-index-student .item-student img{width:100%;height:186.6px;}
.org-index-student .item-student .zhezhao{width: 186.6px;height:186.6px;background: linear-gradient(#096, #dd7c6a); filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity: 0.7; opacity: 0.7;position: absolute;top:-190px;left:0;color:#fff;border-radius:10px;}
.org-index-student .item-student .zhezhao{text-align: center;}
.org-index-student .item-student .zhezhao h2{color:#fff;margin-top:50px;font-size:20px;}

</style>

HTML+JS代码

 
<div class="container">

  <!-- 优异成绩 -->
  <img src="http://www.bootfastui.cn/img/2021/0423-5/title5.jpg" class="center-block  org-index-title" />
  <div class="org-index-student">
    <div class="item-student">
      <img src="http://www.bootfastui.cn/img/2021/0423-5/5d7c9acf8234f.jpg" />
      <div class="zhezhao">
        <h2> 北京电影学院</h2>
        <h4>站三</h4>
      </div>
    </div>
    <div class="item-student">
      <img src="http://www.bootfastui.cn/img/2021/0423-5/5e72ef028b227.jpg" />
      <div class="zhezhao">
        <h2>中国传媒大学</h2>
        <h4>董星辰</h4>
      </div>
    </div>
    <div class="item-student">
      <img src="http://www.bootfastui.cn/img/2021/0423-5/5e72ef99ac552.jpg" />
      <div class="zhezhao">
        <h2>北京电影学院</h2>
        <h4>张弛</h4>
      </div>
    </div>
    <div class="item-student">
      <img src="http://www.bootfastui.cn/img/2021/0423-5/5e7307a15afee.jpg" />
      <div class="zhezhao">
        <h2>中央戏剧学院</h2>
        <h4>大鹏</h4>
      </div>
    </div>
    <div class="item-student">
      <img src="http://www.bootfastui.cn/img/2021/0423-5/5e7307d1affb3.jpg" />
      <div class="zhezhao">
        <h2>云南艺术学院</h2>
        <h4>十月</h4>
      </div>
    </div>
    <div class="item-student">
      <img src="http://www.bootfastui.cn/img/2021/0423-5/5e73082581e63.jpg" />
      <div class="zhezhao">
        <h2>中央美术学院</h2>
        <h4>时雨晨</h4>
      </div>
    </div>
    <div class="item-student">
      <img src="http://www.bootfastui.cn/img/2021/0423-5/5e73087b61105.jpg" />
      <div class="zhezhao">
        <h2>上海戏剧学院</h2>
        <h4>泽宇</h4>
      </div>
    </div>
    <script>
      $(function () {
        $('.item-student').hover(function () {
          $(this).find('.zhezhao').animate({ top: '0' }, "normal");
        }, function () {
          $(this).find('.zhezhao').animate({ top: '-340px' });
        })
      })
    </script>
    <div class="clear"></div>

  </div>

</div>