html - 有没有办法用 CSS 重新创建这个网格 slider ？

Question

我偶然发现了这张推荐网格 slider 的图像，我真的很想在我的 website 上使用类似的东西.

我整个上午都在寻找一种用 html 和 css 模拟它的好方法。我试图避免使用 javascript，因为在我的 wordpress 网站上实现它太复杂了，而且每次我尝试时它通常都会破坏我的网站。我找到了这个标签式画廊:

cssscript.com

有没有一种简单的方法可以让它看起来更像上面的例子？我似乎无法真正让它四处移动并按照我想要的方式查看。

Answer 1

我给你做了一个布局来演示你是怎么做到的^^

.wrapper {
	width: 500px;
	height: 200px;
	position: relative;
}
input {
	display: none;
}
.images {
	width: 300px;
	height: 160px;
	position: absolute;
	top: 0;
	right: 0;
}
label {
	display:block;
	width: 50%;
	height: 100%;
	background: lightblue;
	float: left;
}
label:hover {
	background: darkblue;
}
.left1, .left2 {
	width: 200px;
	background: blue;
	display: none;
	position: absolute;
	top: 0;
	left: -200px;
	bottom: -40px;
}
.bottom1, .bottom2 {
	width: 300px;
	height: 40px;
	position: absolute;
	bottom: -40px;
	right: 0;
	display: none;
	background: orange;
}
#img1:checked + .img1,
#img2:checked + .img2 {
	background: darkblue;
}
#img1:checked + .img1 + .left1,
#img2:checked + .img2 + .left2,
#img1:checked + .img1 + .left1 + .bottom1,
#img2:checked + .img2 + .left2 + .bottom2{
	display: block;
}

<div class="wrapper">  
	<div class="images">
		<input id="img1" type="radio" checked name="img" />
		<label class="img1" for="img1"></label>
		<div class="left1">lalalallalala  la l ala la la </div>
		<div class="bottom1">a lal  all ala</div>
		
		<input id="img2" type="radio" name="img" />
		<label class="img2" for="img2"></label>
		<div class="left2">gb bgbg  gb g b gb gb  </div>
		<div class="bottom2">gb gb g b gb g b gb</div>
	</div>
</div>