html - 缩放时图像重叠

Question

我试图用 HTML 将 4 张图片排成一行，并使用 CSS 代码在鼠标悬停在上面时缩放它们 HTML 代码:

<img class="Images" src="Images/image1.jpg" style="position:absolute; top:590px; left: 420px;">
<img class="Images" src="Images/image2.jpg" style="position:absolute; top:590px; left: 590px;">
<img class="Images" src="Images/image3.jpg" style="position:absolute; top:590px; left: 760px;">
<img class="Images" src="Images/image4.jpg" style="position:absolute; top:590px; left: 930px;">

CSS 代码:

.Images{
    width: 150px;
    height: 150px;
    border: 1px solid blue;
}
.Images:hover{
    -moz-transform:scale(4);
    -o-transform:scale(4);
    -webkit-transform:scale(4);
}

我的问题是，当我缩放第一张图片时，它会在图片内部显示下一张图片，当我缩放第二张图片时，它会在图片内显示下一张图片，但第一张图片隐藏在第二张图片等等。我应该如何隐藏下一张图片。

Answer 1

所以听起来您希望悬停的图像位于其他图像的前面。为此，您可以使用 z-index CSS 属性来指定堆栈顺序:http://www.w3schools.com/cssref/pr_pos_z-index.asp

.Images{
    width: 150px;
    height: 150px;
    border: 1px solid blue;
    z-index:0;
}
.Images:hover{
    -moz-transform:scale(4);
    -o-transform:scale(4);
    -webkit-transform:scale(4);
    z-index:1;
}