css3 马赛克卡片悬停ui特效源码下载

css3 马赛克卡片悬停ui特效源码免费下载

【资源属性】：
资源名称：css3 马赛克卡片悬停ui特效源码
资源大小：121KB
资源类别： CSS特效
更新时间：2023-07-04
资源语言：简体中文
授权方式：免费下载
使用平台：Windows/Linux/Mac
下载地址：下载地址
演示地址：查看演示

软件简介下载地址 ↓

资源介绍：

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及以下浏览器。

资源标签： CSS3 马赛克卡片悬停 ui特效