Question

我想创建一系列重叠的，可选的图像，类似于本页顶部的图像：https://www.onedrop.org/en/mission/

有没有可以使用的Wordpress插件，还是最好使用Javascript / CSS从头开始编写它？

Answer 1

给出所有图像position: relative，并使用z-index控制哪个图像位于最前面（默认情况下）。设置z-index以在hover上进行更改，以使悬停的图像位于最前面。

Answer 2

您可以使用CSS position，:hover和z-index

实现此目的

这是小提琴：

.main {
  position: relative;
  width: 500px;
  margin: 0 auto;
  margin-top: 50px;
}

.main img {
  position: absolute;
  border-radius: 20px;
  opacity: 0.8;
  width: 100%;
}

.main img:first-child {
  z-index: 4;
  left: -40px;
  opacity: 1;
}

.main img:nth-child(2) {
  z-index: 3;
  left: 40px;
}

.main img:nth-child(3) {
  z-index: 2;
  left: 0;
  top: -50px;
}

.main img:nth-child(4) {
  z-index: 1;
  top: 50px;
}

.main img:nth-child(2):hover,
.main img:nth-child(3):hover,
.main img:nth-child(4):hover {
  z-index: 99;
  opacity: 1;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="main">
    <img src="https://cdn.pixabay.com/photo/2019/05/04/22/41/atomium-4179270_960_720.jpg" />
    <img src="https://cdn.pixabay.com/photo/2019/02/25/17/51/kittens-4020199_960_720.jpg" />
    <img src="https://cdn.pixabay.com/photo/2015/11/18/15/44/france-1049333_960_720.jpg" />
    <img src="https://cdn.pixabay.com/photo/2016/03/17/23/07/abstract-1264071_960_720.png" />
  </div>

</body>

</html>

注意：请根据您的要求调整图像width height和positions：）

如何创建一系列重叠的可选图像，类似于本页上的图像？

2 个答案: