html - 如何在我的 CSS 库中正确定位图像？

Question

嘿，这是我的第一个问题，所以如果我有任何错误，我很抱歉。

我正在尝试使用 仅 HTML 和 CSS 创建一个画廊，到目前为止，我已经将所有内容对齐并进行了相当多的排序。问题是图像放大器处于悬停状态，当您将鼠标悬停在放大的图像上时，放大的图像会显示在其各自图像的顶部，但是当您向下滚动并将鼠标悬停在图像上时，放大的图像会保持不变并且不会跟随图片。

我试过为图像和悬停图像使用 position 属性，但我做不好。不过，我仍然希望图像从 div 中“弹出”。

我已将代码粘贴到下面的链接中:
http://pastebin.com/fZxbKZEJ

Answer 1

将 position: absolute; 更改为 position:fixed;。这将使图像弹出相对于 View 。玩转 margin 以获得正确的对齐方式。

例如:

margin: 100px auto 0;

所以，

.bigImage{         
     display:none;
     position:fixed;
     height:310px;
     width:250px;
     margin:100px auto 0;
     border:2px solid #39F;
 }

如果您只是想让弹出窗口跟随原始图像，请执行此操作

.bigImage{         
     display:none;
     position:relative;
     height:310px;
     width:250px;
     margin:-260px 0 0 -45px;
     border:2px solid #39F;
 }