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

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

我可以使用WordPress插件，还是最好使用JavaScript/CSS从头开始编码它？

给出所有图像position: relative，并使用z-index控制哪个图像(默认情况下(。将z-index设置为在hover上更改以使盘旋图像进入前面。

您可以使用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：(

相关内容

最新更新

热门标签：