css交互效果_创建一个CSS网格图像库（具有模糊效果和交互媒体查询）

css交互效果

在本教程中，我们将使用一堆普通的缩略图链接，并将它们变成具有模糊悬停效果的自适应CSS网格库。 我们还将使用出色CSS技巧来确保触摸屏用户不会错过！

这是我们将要创建的：

一点背景

链接充当用户所在页面（或您指定的任何页面）的子页面的导航，结果插件输出如下所示：

使用Rachel插件生成的标记，我们将执行以下操作：

• 使用CSS Grid排列缩略图，为我们提供响应式画廊。
• 使用CSS过滤器和过渡效果创建悬停效果。
• 使用漂亮CSS媒体查询来确保触摸屏用户即使没有悬停也仍然可以看到每个缩略图标题。

1.更改标记（一点）

让我们快速浏览一下Rachel的代码生成的标记。 清理后，它看起来实际上是这样的：

<div class="child-page-listing">

  <h2>Our Locations</h2>

  <article class="location-listing">
    <a class="location-title" href="#">San Francisco</a>
    <div class="location-image">
      <a href="#">
        <img src="image.jpg" alt="san francisco">
      </a>
    </div>
  </article>

  <!-- more articles -->

</div>

我们有一个父<div> ，它包含一个<h2>和一些<article>元素。 当我们使用CSS Grid时，我们首先定义一个网格容器。 在这种情况下，我们可以使用父<div> ，但这将使每个直接子项（包括<h2>一个网格项，因此我们需要进行一些更改。

我们将所有<ar