创建CSS Grid 图像库(具有模糊效果和媒体查询)

我们将用一组图片缩略图列表将它们转换为具有模糊悬停效果的响应式CSS Grid图库。我们还将使用一个很棒的CSS技巧来确保触摸屏用户也能体验到这种效果！我们将执行以下操作：

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

首先要把列表的结构罗列出来

响应式CSS网格

只要有几个规则，我们就可以把缩略图变成网格：

.grid-container {
display: grid;
grid-gap: 1em;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

这里的简单线条是display:grid;（它将所有子项转换成网格项并加以布局）和grid-gap:1em;（它定义了模块之间的间隔）。稍微的复杂的是我们定义的grid-template-columns属性的值，它定义了我们的列。你平常可能看到的是类似repeat(3,200px)的内容，它将定义的是三列200px。在这种情况下，我们将使用auto-fill来填充关键字repeat()，然后使用了一些值。这给了我们尽可能多的列，最小为300px，最大为1fr，将适合网格容器。调整浏览器窗口大小，看看它是如何运行的！

你需要补充的一个细节：

img {
width: 100%;
height: auto;
vertical-align: middle;
}

悬停效果

我们将使用标题作为缩略图的叠加层，在悬停时显示它们。我们还将为悬停的图像提供红色效果，并使其略微模糊，以帮助覆盖文本的可读性。

覆盖标题

要叠加标题，我们需要定位它，所以我们首先要将

设置position: relative;和标题position: absolute;。我们将其背景填充为红色背景：

.location-listing {
position: relative;
}

.location-title {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(90, 0, 10, 0.4);
}

已经很好的显示了

标题的风格

一些印刷样式将改善我们的标题的外观，并且三行flexbox魔术将集中为我们对齐：

.location-title {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(90, 0, 10, 0.4);

color: white;
font-size: 1.5em;
font-weight: bold;
text-decoration: none;

display: flex;
align-items: center;
justify-content: center;
}

好多了：

隐藏标题

现在让我们通过设置它的不透明度隐藏标题，这样我们可以在悬停时看到它。.location-title应该这样做：

opacity: 0;
transition: opacity .5s;

在这里，我们还设置了一个transition规则，以便当我们将不透明度恢复时，它将有0.5秒的延时过程。我们现在将hover悬停时不透明度设置为1

.location-listing:hover .location-title {
opacity: 1;
}

到这里我们标题悬停效果已经完美实现了：

模糊效果

我们已经创造了一个漂亮的悬停效果，接下来为图像添加模糊滤镜。首先将模糊滤镜设置为正常状态，以便为我们提供一些过渡。然后我们会为悬停状态模糊设置为2px（这里你可以根据你的意愿设置，但我认为2px是一个很棒的视觉效果）：

.location-image img {
filter: blur(0px);
transition: filter 0.3s ease-in;
}

.location-listing:hover .location-image img {
filter: blur(2px);
}

这就是效果了：

需要注意的两件事：

标题已经消失，因为浏览器现在正在顶部呈现模糊的图形。
模糊效果看起来不错，但它也有边缘模糊效果。(可以把它去掉)

因为层级的关系标题被遮住了把.location-title设置z-index:1 把边缘模糊去掉，首先我们对图像进行缩放，使其稍微大一些，然后对图像容器（.location-list）设置overflow: hidden;以便当较大的图像模糊时，有效地裁剪其边缘。下面是两个元素已设置的属性：

.location-image img {
filter: blur(0px);
transition: filter 0.3s ease-in;
transform: scale(1.1);
}

.location-listing {
position: relative;
overflow: hidden;
}

触摸屏问题

有些网页应用都有很多悬停效果，而且是都被隐藏，在不触发的时候是看不到的(大量的平板电脑和智能手机不能模仿悬停“按下”动作)，这是不容易访问的。幸运的是，CSS有一些非常有用的交互媒体查询可以帮助我们（他们也享受相当不错的浏览器支持）。这些查询将检测浏览器的输入机制 - 指针设备质量，悬停能力以及一些其他特殊定义 - 因此我们可以相当准确地确定是否在触摸屏设备上查看我们的缩略图。以此媒体查询为例（它完全符合我们的预期）

@media (hover: none) { }

在这些花括号中，我们将我们想要应用的任何样式应用于无法处理的浏览器:hover。我们将声明对于悬停不可能或至少不方便的设备，缩略图图像将始终模糊，标题将始终可见：

@media (hover: none) {
.location-title {
opacity: 1;
}
.location-image img {
filter: blur(2px);
}
}

注意：如上所述，对此的支持非常合理，但有关交互媒体查询实施的讨论仍在进行中。这个规范很可能会改变或删除部分。

See the Pen 创建CSS Grid 图像库 by w3cbest.com (@w3cbest) on CodePen.