直接使用代码

图片素材

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

css代码

  <link rel="stylesheet" href="/Public/css/bootstrap.css" />  
<style>
.card{overflow:hidden;}
.card-reveal .card-body{display:flex;align-items:center;justify-content:center;position:absolute;bottom:0;height:100%;width:100%;text-align:center;}
.card-reveal .card-body .card-title{font-size:.75rem;margin:0;text-transform:uppercase;font-weight:bolder;color:#4d4d4d;}
@media (min-width:992px){.card-reveal .card-body{height:100%;bottom:-100%;-webkit-transition:bottom .2s ease-in-out;transition:bottom .2s ease-in-out;}
.card-reveal .card-img-top{-webkit-transition:-webkit-transform .5s ease-in-out;transition:-webkit-transform .5s ease-in-out;transition:transform .5s ease-in-out;transition:transform .5s ease-in-out,-webkit-transform .5s ease-in-out;}
.card-reveal:hover .card-body{bottom:0;background-color:rgba(255,255,255,0.7);}
.card-reveal:hover .card-img-top{-webkit-transform:scale(1.3);transform:scale(1.3);}
}
@media (min-width:576px) and (max-width:1199.98px){.card-columns{-webkit-column-count:2;-moz-column-count:2;column-count:2;}
}

</style>

HTML+JS代码

   
<div class="container mt-5">
  <div class="card-columns">
    <a class="card card-reveal" href="#">
      <img class="card-img-top" src="http://www.bootfastui.cn/img/2021/0910/1.jpg" />
      <div class="card-body">
        <div class="card-title">Look forward</div>
      </div>
    </a>

    <a class="card card-reveal" href="#">
      <img class="card-img-top" src="http://www.bootfastui.cn/img/2021/0910/2.jpg" />
      <div class="card-body">
        <div class="card-title">Drops of rain</div>
      </div>
    </a>

    <a class="card card-reveal" href="#">
      <img class="card-img-top" src="http://www.bootfastui.cn/img/2021/0910/3.jpg" />
      <div class="card-body">
        <div class="card-title">Umbrella kiss</div>
      </div>
    </a>

    <a class="card card-reveal" href="#">
      <img class="card-img-top" src="http://www.bootfastui.cn/img/2021/0910/4.jpg" />
      <div class="card-body">
        <div class="card-title">The Tulip</div>
      </div>
    </a>

    <a class="card card-reveal" href="#">
      <img class="card-img-top" src="http://www.bootfastui.cn/img/2021/0910/5.jpg" />
      <div class="card-body">
        <div class="card-title">postes</div>
      </div>
    </a>

    <a class="card card-reveal" href="#">
      <img class="card-img-top" src="http://www.bootfastui.cn/img/2021/0910/6.jpg" />
      <div class="card-body">
        <div class="card-title">Read to smile</div>
      </div>
    </a>

    <a class="card card-reveal" href="#">
      <img class="card-img-top" src="http://www.bootfastui.cn/img/2021/0910/7.jpg" />
      <div class="card-body">
        <div class="card-title">Tower of Terror</div>
      </div>
    </a>
  </div>
</div>
<!-- partial -->