Question

我想将图片悬停在较高的z索引上，以覆盖相邻的图片。

body {
  padding: 2%;
}

.row {
  padding: 1%;
}

.projectimg {
  z-index: 1;
}

.projectimg:hover {
  z-index: 100;
  transform: scale(4);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col" style="margin: 0; padding: 0;">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1734469/windows_wallpaper.png" class="projectimg" alt="" style="width: 70%">
      </div>
      <div class="col" style="margin: 0; padding: 0;">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1734469/windows_wallpaper.png" class="projectimg" alt="" style="width: 70%">
      </div>
      <div class="col" style="margin: 0; padding: 0;">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1734469/windows_wallpaper.png" class="projectimg" alt="" style="width: 70%">
      </div>
      <div class="col" style="margin: 0; padding: 0;">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1734469/windows_wallpaper.png" class="projectimg" alt="" style="width: 70%">
      </div>
    </div>
    <div class="row">
      <div class="col" style="margin: 0; padding: 0;">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1734469/windows_wallpaper.png" class="projectimg" alt="" style="width: 70%">
      </div>
      <div class="col" style="margin: 0; padding: 0;">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1734469/windows_wallpaper.png" class="projectimg" alt="" style="width: 70%">
      </div>
      <div class="col" style="margin: 0; padding: 0;">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1734469/windows_wallpaper.png" class="projectimg" alt="" style="width: 70%">
      </div>
      <div class="col" style="margin: 0; padding: 0;">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1734469/windows_wallpaper.png" class="projectimg" alt="" style="width: 70%">
      </div>
    </div>
  </div>
</body>

在此JSFiddle中，您可以看到我现在拥有的内容，如果我将鼠标悬停在最后一张图片上，它会覆盖所有其他图片。但是此方法不适用于其他图像。我尝试了几种方法，但到目前为止都没有奏效。

https://jsfiddle.net/m_tibo/9eskxz2a/21/

Answer 1

将position: relative添加到.projectimg:hover元素-您需要 position 具有{{1的默认 static 位置除外}}生效。

请参见摘要和updated fiddle：

z-index

body {
  padding: 2%;
}

.row {
  padding: 1%;
}

.projectimg {
  z-index: 1;
}

.projectimg:hover {
  position: relative;
  /* ADDED */
  z-index: 100;
  transform: scale(4);
}

我无法在悬停时增加图像的Z索引

1 个答案: