HTML5 CSS转换，用于960网格布局上的图像缩放

我很难获得正确显示图像高度/宽度的过渡。如果你看我的页面，我认为不需要太多解释：

本质上，我试图通过将图像放大一倍来获得更好的视觉效果。然而，因为我有一个960网格布局，所以它并没有正确地显示出来

试试这个：点击Chip Kidd和David Carson的图片，你会看到

当你将Chip Kidd悬停在它上面时，它并不坏，但当它放大时，它会出现在David Carson图像的后面，而不是顶部

大卫·卡森看起来不错，因为右边没有图像。但是，它不是向左增长，而是向右增长，超出960网格

我可以用什么方法使图像的放大看起来更美观（即它们不会隐藏在其他图像后面，也许它们保持在12格容器的大小内，而不是像David Carson图像那样超出该边界？

尝试使用放大镜，而不只是更改宽度和高度

编辑：尝试将悬停规则更改为此（您必须添加浏览器前缀）

我添加了一个相对位置和z索引，以确保它始终位于其他事物之上。我还添加了一个盒子阴影以获得更好的效果，这取决于你是否想保留它

---

编辑2：我还注意到您不希望它溢出网格。可以使用“变换原点”执行此操作。您必须为左对齐和右对齐的图像赋予类，并设置

transformorigin:left top或
变换原点：右上方分别为。同样，我在这里省略了供应商前缀
 在这种情况下，我会使用像花式盒子一样的灯箱。我不认为有可能使它在美学上令人愉悦。其他图像无法真正知道将要发生什么并做出反应。也许有一种反应灵敏的砖石结构？试试谷歌搜索。祝你好运我认为这是一个很好的解决方案，谢谢！顺便说一句，框阴影是应用于2秒的持续时间，还是在过渡之后才应用？它将在您悬停时立即应用。
.zinepages img:hover {
    position: relative;
    z-index: 100;
    -webkit-transform: scale(2);
    transition: all 2s;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}