马赛克卡片演示免费素材下载 css3卡片悬停ui殊效

css3 马赛克卡片悬停ui殊效源码是一款由css3滤镜卡片，鼠标悬停列表图片马赛克模胡动画成果，选中的图片高清显示殊效。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. HTML代码

<section class="hero-section">
  <div class="card-grid">
    <a class="card" href="#">
      <div class="card__background" style="background-image: url(img/p1.jpg)"></div>
      <div class="card__content">
        <p class="card__category">分类</p>
        <h3 class="card__heading">卡片马赛克演示</h3>
      </div>
    </a>
    <a class="card" href="#">
      <div class="card__background" style="background-image: url(img/p2.jpg)"></div>
      <div class="card__content">
        <p class="card__category">分类</p>
        <h3 class="card__heading">卡片马赛克演示</h3>
      </div>
    </a>
    <a class="card" href="#">
      <div class="card__background" style="background-image: url(img/p3.jpg)"></div>
      <div class="card__content">
        <p class="card__category">分类</p>
        <h3 class="card__heading">卡片马赛克演示</h3>
      </div>
    </li>
    </a>
    <a class="card" href="#">
      <div class="card__background" style="background-image: url(img/p4.jpg)"></div>
      <div class="card__content">
        <p class="card__category">分类</p>
        <h3 class="card__heading">卡片马赛克演示</h3>
      </div>
    </a>
  </div>
</section>

倡议实用阅读器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 没有支持Safari、IE8及如下阅读器。