Javascript 如何制作；“大”；不带'；是否移动布局中的其他相邻项？

我制作了一本我希望实现的相册，但基本上是这样的：
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>

#box01{
宽度：213px；
高度：241px；
背景图片：url（box01.png）；
背景重复：无重复；
浮动：左；
}
#box01：悬停{
宽度：353px；
身高：353px；
背景图片：url（box01 big.png）；
背景重复：无重复；
}

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

下面信息框的显示似乎不太困难（好像是一个onclick事件来切换div的显示），但我想知道每个框的移动情况。我有一个想法，可能会直接在基础图像上制作第二行图像（大版本），并以某种方式使其滚动，以便image01可以改变image01的可见性，使其仍然位于相同的位置，而不会移动基础图像

也就是说，这似乎更适合JavaScript或JQuery，对吗？我在这方面不是很有经验，但我很想学习，这似乎是一个相当不错的项目来帮助我做到这一点

---

有没有人能为我指明我想要实现的目标的正确方向？无论是关于这种概念的教程，还是其他的，我都非常感激！我做了一些研究，发现了一些滚动教程，但没有足够具体的内容来处理我在这里遇到的问题，即相邻的项目在页面上移动……

您可以使用CSS的

transform

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

这里有一个简单的例子：

---

所以根本不需要Javascript：）

谢谢你的帮助，鲁本-它成功了！我不得不在几张图片上添加一些负边距（它们的大小不尽相同，这最初会导致显示问题），但我得到了它，现在进入最后一部分：onclick操作！将此标记为已回答！