Question

我仔细定位了一张图片。我想在它后面添加另一个图像，这样，当我将鼠标悬停在原始图像上时，它的不透明度会降低，显示新图像。但由于某种原因，新图像位于原始图像的下方。如何将其放置在原始图像后面？

＆＃13;

import java.util.Comparator.*;
import java.util.stream.Collectors.*;

Map<String, Integer> map = // ...
List<String> ss = map.entrySet().stream()
                     .sorted(comparing(e -> e.getValue())
                              .reversed()
                              .thenComparing(e -> e.getKey()))
                     .map(e -> e.getKey())
                     .collect(toList());

＆＃13;

.vid-content-vids {
  float: left;
  width: 200px;
  height: 200px;
  margin: .5%;
  padding-bottom: 25px;
}
.vid-content-vids img {
  position: relative;
  left: 18%;
}
.vid-content-vids img.videos-hover {
  position: relative;
  top: 0px;
  left: 18%;
}
.vid-content-vids h1 {
  font-family: Arial;
  font-weight: bolder;
  font-size: 15px;
  word-wrap: break-all;
  width: 200px;
  margin-left: 10%;
}
img.videos:hover {
  opacity: 0.4
}

＆＃13;

Answer 1

在相对定位的容器内使用绝对定位。给底部图像一个-1 z-index。

.vid-content-vids {
  position: relative;
}
.videos,
.videos-hover {
  position: absolute;
  top: 0px;
  left: 0px;
}
.videos-hover {
  z-index: -1;
}
.videos:hover {
  opacity: 0.4;
  cursor: pointer;
}

<div class="vid-content-vids">
  <img src="http://lorempixel.com/150/150/abstract/1/" class="videos" style="height:150px; width:150px;">
  <img src="http://lorempixel.com/150/150/abstract/2/" class="videos-hover" style="height:150px; width:150px; margin: 0px;">


</div>

将一张图像放在另一张图像的前面

1 个答案: