精彩案例

直接使用代码

图片素材

css代码

 <style>

/*精彩案例*/
.title_anli{ display:inline-block; margin:15px auto; border-bottom:3px solid #0e5ca9; line-height:60px; font-size:30px; color:#0e5ca9;}
#list_anli .kuai{ position:relative; margin:15px 0; }
#list_anli .kuai .font{ position:absolute; width:100%; bottom:0; left:0; color:#fff; background:url(http://www.bootfastui.cn/img/2021/0521-6/bg_hei.png); padding:15px;}
#list_anli .kuai .font h5{ font-size:18px;}

@media screen and (max-width: 2700px){
#list_anli .kuai img{  height:370px}
}

@media screen and (max-width: 738px) {
#list_anli .kuai img { height:400px}
}

</style>

HTML+JS代码

 
<div class="container" id="list_anli"><br>
  <div class="text-center">
    <h1 class="title_anli">精彩案例</h1>
  </div>
 
  <div class="clear"></div>
  <div class="row">
    <div class="col-md-3">
      <a href="/index.php/Home/Index/article_anli/id/9">
        <div class="kuai">

          <img src="http://www.bootfastui.cn/img/2021/0521-6/5afd384867658.jpg" width="100%">
          <div class="font">

            <h5>魏瑞</h5>
            性别：女<br />

            项目：带薪实习<br />
            地点：Motel 6<br />
          </div>
        </div>
      </a>
    </div>
    <!--col-md-3 end -->
    <div class="col-md-3">
      <a href="/index.php/Home/Index/article_anli/id/8">
        <div class="kuai">

          <img src="http://www.bootfastui.cn/img/2021/0521-6/5afd384867658.jpg" width="100%">
          <div class="font">

            <h5>马苪</h5>
            性别：女<br />

            项目：带薪实习<br />
            地点：Myrtle Beach,Sc,Dunes Village<br />
          </div>
        </div>
      </a>
    </div>
    <!--col-md-3 end -->
    <div class="col-md-3">
      <a href="/index.php/Home/Index/article_anli/id/7">
        <div class="kuai">

          <img src="http://www.bootfastui.cn/img/2021/0521-6/5afd384867658.jpg" width="100%">
          <div class="font">

            <h5>刘晓丹</h5>
            性别：女<br />

            项目：带薪实习<br />
            地点：Custer State Park Resort<br />
          </div>
        </div>
      </a>
    </div>
    <!--col-md-3 end -->
    <div class="col-md-3">
      <a href="/index.php/Home/Index/article_anli/id/6">
        <div class="kuai">

          <img src="http://www.bootfastui.cn/img/2021/0521-6/5afd384867658.jpg" width="100%">
          <div class="font">

            <h5>林雨辉</h5>
            性别：女<br />

            项目：带薪实习<br />
            地点：Homer，AK<br />
          </div>
        </div>
      </a>
    </div>
    <!--col-md-3 end -->
    <div class="col-md-3">
      <a href="/index.php/Home/Index/article_anli/id/5">
        <div class="kuai">
          <img src="http://www.bootfastui.cn/img/2021/0521-6/5afd384867658.jpg" width="100%">
          <div class="font">

            <h5>崔月如</h5>
            性别：女<br />

            项目：带薪实习<br />
            地点：Eloy City<br />
          </div>
        </div>
      </a>
    </div>
    <!--col-md-3 end -->
    <div class="col-md-3">
      <a href="/index.php/Home/Index/article_anli/id/4">
        <div class="kuai">

          <img src="http://www.bootfastui.cn/img/2021/0521-6/5afd384867658.jpg" width="100%">
          <div class="font">

            <h5>崔静文</h5>
            性别：女<br />

            项目：带薪实习<br />
            地点：325 9th Street Beach Haven, NJ 08008<br />
          </div>
        </div>
      </a>
    </div>
    <!--col-md-3 end -->
  </div>


</div>