直接使用代码

图片素材

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

css代码

 <style>
#index_anli .kuai{cursor: pointer;padding:0;margin:0 ;}
#index_anli .kuai .mar10{overflow: hidden;}
#index_anli  img{ transition: all 0.6s; }  
#index_anli  .kuai:hover img{transform: scale(1.1); z-index:9999!important}  

</style>

HTML+JS代码

 
<!--精彩案例-->
<h1><img src="http://www.bootfastui.cn/img/2021/0521-4/index_title_anli.jpg" class="center-block" /></h1>
<div class="container" id="index_anli">
  <div class="col-md-9 col-xs-12 pm">

    <a href="/index.php/Home/Index/article_anli/id/7">
      <div class="col-md-8 col-xs-8 kuai">
        <div class="mar10"><img src="http://www.bootfastui.cn/img/2021/0521-4/index_anli1.jpg" width="100%" /></div>
      </div>
    </a>
    <a href="/index.php/Home/Index/article_anli/id/5">
      <div class="col-md-4 col-xs-4 kuai">
        <div class="mar10"><img src="http://www.bootfastui.cn/img/2021/0521-4/index_anli2.jpg" width="100%" /></div>
      </div>
    </a>
    <div class="clear"></div>

    <a href="/index.php/Home/Index/article_anli/id/8">
      <div class="col-md-4 col-xs-4 kuai">
        <div class="mar10"><img src="http://www.bootfastui.cn/img/2021/0521-4/index_anli4.jpg" width="100%" /></div>
      </div>
    </a>
    <a href="/index.php/Home/Index/article_anli/id/6">
      <div class="col-md-8 col-xs-8 kuai">
        <div class="mar10"><img src="http://www.bootfastui.cn/img/2021/0521-4/index_anli5.jpg" width="100%" /></div>
      </div>
    </a>

  </div>
  <!--col-md-9 end -->
  <a href="/index.php/Home/Index/article_anli/id/9">
    <div class="col-md-3 pm visible-lg visible-md visible-sm kuai">
      <div class="mar10"><img src="http://www.bootfastui.cn/img/2021/0521-4/index_anli3.jpg" width="100%" /></div>
    </div>
  </a>


</div>