javascript - 如何制作不移动布局中其他相邻元素的 "big"翻转图像？

Question

我做了一个我希望达到的相册，但它基本上是这样的:
1) 一排 4 个基本个体图像。 2) 在每张图片上滚动/悬停时，会显示一个更大的图片，直接在同一个地方。 3) 点击这个大图，下面会显示一个信息框。

我开始使用纯 CSS 搞乱这个概念。我用自己的 ID 创建了 4 个空白 div。我为它们的默认状态指定了一个背景图像(设置基本图像的高度/宽度)并使所有 4 个 div 向左浮动。显示是完美的开始。然后我为每个 div 添加了一个 CSS 类 (id):hover，用新的大图像替换基本背景图像。这是代码的示例摘录:

#box01 {
    width: 213px; 
    height: 241px; 
    background-image: url(box01.png);
    background-repeat: no-repeat;
    float: left;
}
#box01:hover {
    width: 353px; 
    height: 353px; 
    background-image: url(box01-big.png);
    background-repeat: no-repeat;
}

<div id="boxes">
    <div id="box01"></div>
    <div id="box02"></div>
    <div id="box03"></div>
    <div id="box04"></div>
</div>

这个功能但问题是大图像基本上占据了空间。以此为例。

下面的信息框的显示似乎并不太难(似乎是一个 onclick 事件来切换 div 的显示)但我想知道每个框的移动。我想到了直接在基本图像之上制作第二行图像(大版本)，并以某种方式制作它，以便 image01 的翻转会改变 image01-big 的可见性，因此它仍然在同一个地方而不移动基本图像。

也就是说，这似乎更适合 JavaScript 或 JQuery，对吧？我在这方面不太有经验，但我很想学习，这似乎是一个相当不错的元素，可以帮助我做到这一点。

谁能为我指明正确的方向以实现我想要实现的目标？无论是有关此类概念的教程，还是其他内容，我都会非常感激!我做了一些研究并找到了一些翻转教程，但没有足够具体的内容来解决我在这里遇到的相邻元素在页面上完全移动的问题......

Answer 1

您可以使用 CSS 的 transform 属性来放大元素，而不会在文档布局中占用更多空间。这可能会使您的图像看起来像素化，但您可以通过(悬停时)显示更高分辨率的图像来解决此问题。

这是一个简单的例子:
https://jsbin.com/johomiy/edit?html,css,output

所以根本不需要 Javascript :)