如何制作 "big" 不移动布局中其他相邻项目的翻转图像？

Question

我做了一个我希望达到的相册，但是基本上是这样的：
1) dividual 图像中的一行 4 个碱基。 2) 在每个图像的rollover/hover上，显示一个更大的图像，直接在同一个地方。 3) 点击这个大图，下面会显示一个信息框。

我开始使用纯 CSS 搞乱这个概念。我用自己的 ID 创建了 4 个空白 div。我为它们的默认状态指定了背景图像（设置基本图像的 height/width）并使所有 4 div 向左浮动。显示是完美的开始。然后，我为每个 div 添加了 CSS class of (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>

这个功能，但问题是大图像基本上接管了 space。以此为例。

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

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

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

Answer 1

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

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

所以根本不需要 Javascript:)

如何制作 "big" 不移动布局中其他相邻项目的翻转图像？

How to make "big" rollover images that don't move the other adjacent items in the layout?

javascript

jquery

css

layout

rollover