纯CSS中的可视数据库库

This article was inspired by one of my continuing education students, who delivered a final project with the effect you see above. His version used JavaScript, but I realized the same result could be achieved in pure CSS.

本文的灵感来自于我的一名继续教育学生，他们完成了一个最终项目，效果与您上面看到的一样。 他的版本使用JavaScript ，但是我意识到用纯CSS可以实现相同的结果。

This effect is best suited to a group of two dozen items or less. The goal is to filter the items by type, just as a true database would, only visually. In the example above, I’ve used travel photographs by Trey Radcliff.

此效果最适合两个或更少的项目。 目标是像虚拟数据库一样，仅在视觉上按类型过滤项目。 在上面的示例中，我使用了Trey Radcliff的旅行照片。

The gallery images could be organized in almost any way you wish: I’ve contained the photographs in a figure element, but an unordered list or div could work equally well. Each image receives a class that identifies it as being a member of a particular set. As the class is only used as a CSS reference, and not as an actual style: an HTML5 data attribute could be equally effective.

画廊的图像几乎可以按照您希望的任何方式进行组织：我将照片包含在一个figure元素中，但是无序列表或div也可以很好地工作。 每个图像都会收到一个class ，该class其标识为特定集合的成员。 由于class仅用作CSS引用，而不用作实际样式： HTML5 data属性可能同样有效。

The interesting part of the code lies immediately above the images. HTML5 allows form elements to be placed anywhere, so we can add a series of radio buttons with matching <label> tags immediately above the <img> elements. The for attribute on each <label> will turn the associated radio button with a matching id value on and off; as the buttons all share the same name value, activation of one button will turn the others off.

代码有趣的部分位于图像的上方。 HTML5允许将表单元素放置在任何位置，因此我们可以在<img>元素的正上方添加一系列带有匹配<label>标签的单选按钮 。 每个<label>上的for属性将打开和关闭具有匹配id值的关联单选按钮； 由于所有按钮共享相同的name值，因此激活一个按钮将关闭其他按钮。

<input type="radio" name="zoom" id="france">
<label for="france">France</label>
<input type="radio" name="zoom" id="japan">
<label for="japan">Japan</label>
<input type="radio" name="zoom" id="us">
<label for="us">United States</label>
 
<figure id="zoom-gallery">
	<img src="central-park-in-fall.jpg" alt="Central Park In Fall" class="us">
	<img src="kyoto-bamboo-walk.jpg" alt="Kyoto bamboo walk" class="japan">
	<img src="kyoto-forest-walk.jpg" alt="Kyoto forest walk" class="japan">
	<img src="paris-reflected.jpg" alt="Paris reflected" class="france">
	<img src="paris-skyline.jpg" alt="Paris skyline" class="france">
	<img src="yosemite-clouds.jpg"" alt="Yosemite clouds" class="us">
</figure>

Now for the CSS. We’ll start with a basic setup:

现在为CSS。 我们将从基本设置开始：

figure#zoom-gallery {
	margin: 0;
	padding: 0;
}
figure#zoom-gallery img {
	width: 40%;
	max-width: 300px;
	margin: 3%;
	transition: .7s all ease-in-out;
} 
label {
	color: #fff;
	font-family: Futura, Arial, sans-serif;
	padding: 1em;
}

(I’ve removed vendor prefixes from the code to keep it clean.)

(我已从代码中删除了供应商前缀 ，以保持其干净。)

Starting with a variation of the :checked CSS I have talked about previously, we add a sibling selector to zoom images in a particular set. I’ll show one example, for the photographs taken in Japan:

从我之前讨论过的:checked CSS的变体开始，我们添加了一个同级选择器来缩放特定集合中的图像。 我将举例说明在日本拍摄的照片：

input#japan:checked ~ figure img.japan { 
	transform: scale(1.1);
}

At the same time, we want to diminish any images in the gallery that are not in that particular set. Appropriately enough, we use the :not selector. Again, for the photographs from taken of Japan:

同时，我们希望减少画廊中不在该特定集合中的所有图像。 适当地，我们使用:not选择器。 同样，对于日本拍摄的照片：

input#japan:checked ~ figure img:not(.japan) { 
	transform: scale(0.9);
	opacity: 0.6;
}

Optionally, you can hide the radio buttons by setting them to display: none, leveraging the accessibility of the label elements to allow the :checked declarations to operate regardless. If you add this, it makes sense to place a :hover effect on the labels to make it clear that they act as links:

(可选)可以通过将单选按钮设置为display: none来隐藏它们display: none ，利用label元素的可访问性允许:checked声明无论如何运行。 如果添加此选项，则在标签上放置:hover效果以使其清楚地充当链接是很有意义的：

input[type="radio"] {
	display: none;
}
label:hover {
	cursor: pointer;
}

While there are many possible improvements that could be made – I’ve added an animated box-shadow to the image elements – that’s essentially it. The only downside to this approach versus a JavaScript solution is that it does not scale, but that’s not an issue when the number of elements is small and unchanging.

尽管可以做出许多可能的改进-我在图像元素box-shadow添加了动画box-shadow -实质上就是如此。 与JavaScript解决方案相比，此方法的唯一缺点是它无法扩展，但是当元素数量很少且保持不变时，这不是问题。

翻译自: https://thenewcode.com/625/A-Visual-Database-Gallery-In-Pure-CSS