Question

如何使用css和html在一行中叠加多个图像？
例如：如果我的光标在image1上，我希望右边的所有图像都向右推，就像我可以看到image1

到目前为止我做了什么：

HTML

<body>
            <div class="deck">
                <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/kXlrGioGfFKOvibpsPzzGx16cP2.jpg" alt="testimage">
              <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/zzfwhweu5reCv2Loqzon7Q5WAd5.jpg" alt="testimage">
              <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/sGuZHYvu0mXeQCwvJ5yzk2Yoytq.jpg" alt="testimage">
              <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/4Ar01t6sW1ZZBcbz2R1wqjzIBdr.jpg" alt="testimage">

            </div>
 </body>

CSS

.deck {overflow:hidden}
.deck img {position:relative; float:left;  width:185px; height:278px}
.deck img + img {margin-left: -160px;}
.deck img:hover {z-index:9999; border:1px solid red; background: pink}

https://jsfiddle.net/53ryuapx/

Answer 1

您可以使用~选择器选择您悬停的所有图像。由于图像相对定位，您可以将其与left值组合：

.deck img:hover ~ img {
    left: 160px;
}

我可能会建议你将它与相对较新的clip-path属性结合起来吗？不幸的是browser support is not great。

.deck img:hover ~ img {
  left: 160px;
  clip-path: inset(0 160px 0 0)
}

修改：根据您喜欢的结果，有多种方法可以对其进行动画处理。这可能需要一些线索来获得你想要的结果，但这应该让你开始。这里发生的是我们声明一个名为slidein的关键帧动画。悬停图像时，使用animation: slidein .2s对右侧图像进行动画处理。请参阅this JSFiddle中的效果：

@keyframes slidein {
  0% {
    left: 0;
    clip-path: inset(0 0 0 0);
  }
  100% {
    left: 160px;
    clip-path: inset(0 160px 0 0);
  }
}
.deck img:hover ~ img {
  left: 160px;
  clip-path: inset(0 160px 0 0);
  animation: slidein .2s;
}

html css叠加了几张图片

1 个答案: