有没有办法用 CSS 重新创建这个网格滑块？

Question

我看到这张推荐网格滑块的图片，我真的很想在我的 website 上使用类似的东西。

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

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

Answer 1

我相信这可以按如下方式构建：

尽管如此，如果您使用 bootstrap 这样的网格系统，那会容易得多。

<row>
    <col>The left image</col>
    <col>
        <row>
            <row>First row with peoples images</row>
            <row>Second row with people's images</row>
        </row>
        <row>Description of the person</row>
    </col>
</row>

此外，您还需要一些 javascript，如果您使用 jquery，它会变得容易得多：

$(element).hover(function(){
   $(description).html(description);
});

这不是实际代码，只是一个解决方案。

Answer 2

我做了一个布局给你演示一下怎么做^^

.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>

有没有办法用 CSS 重新创建这个网格滑块？

Is there a way to re-create this grid slider with CSS?

html

css

grid

slider

thumbnails