Javascript 使用JS和CSS将图像从图库缩放到屏幕中心 有一个立方体的图像库，我的要求是在鼠标悬停时，任何图像都应该在屏幕中间缩放。我使用了一些解决方案，但它们在屏幕上当前显示的确切位置缩放图像

当图像被缩放时，所有剩余的画廊都应该放在背景中

---

请给我一个这样做的方法，如果有任何代码要发布，请让我知道。

因此，正如Joramanda在添加上述建议时所建议的，这似乎很好。下面是css，因此调整了左右顶部和z索引以生成所需的效果

.polaroid {
    width: 33%;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
        rgba(0, 0, 0, 0.19);
    float: left;
    border: thin;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);
}

img {
    width: 100%
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);

}

.container {
    text-align: center;
    padding: 10px 20px;
    float: left;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);
}

.polaroid:HOVER {
    position:absolute;
    left: 20%;
    right: 20%;
    top:20%;
    z-index:10;
    box-shadow: 0px 0px 150px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.9);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);

}

---

有没有理由投反对票？我建议更新图片，使用绝对位置，并使用类似左：50%和上：50%的选项。不过，这只是css的一个粗略概念。您需要根据实际代码进行调整。@NendoTaka是的，这似乎是一个很好的建议，我可以在悬停时同时更新z索引，使其充当顶层。让我试试这个

如果有任何代码要发布请告诉我

-你有一些代码吗？它“几乎”起作用了吗？您需要帮助吗？@jaromanda X yes几乎可以完成它所能完成的事情。谢谢您，请查看答案并建议css的任何改进