时间戳

首页 > 解决方案 > 我有 4 个堆叠的图像，我想放大并一张一张地缩放

javascript - 我有 4 个堆叠的图像，我想放大并一张一张地缩放

问题描述

我有四个图像堆叠在一起。悬停时，可见图像会放大和淡出以显示下方的图像。

我有两个要解决的问题：

第一个。随着图像的缩放，它会在包含的 div 之外流血。我希望图像可以缩放，但是要隐藏 div 之外的图像区域。

第二。一旦第一个图像完全褪色，我希望现在可见的图像与第一个图像一样并显示下面的图像。目前它只是坐在那里，鼠标指针悬停在它上面。

因此，我有一个相对定位的容器，其中包含 4 个绝对定位的图像。其中之一，我已经包裹在另一个 div 中以尝试隐藏图像的溢出（这不起作用）。

我已经使用 CSS 在 2 秒的时间内转换不透明度和比例，这适用于第一张图像，但不适用于它下面的后续图像。

我要做的是复制我放在一起（在 Adob​​e Spark 上）作为网站的演示文稿。我花了几个星期研究我所追求的各种效果，但似乎只是想出了各种 JavaScript/jQuery 插件。

我在上面尝试做的事情还不够简单，无法仅使用 CSS 转换和过渡吗？我的想法是对这些进行排序，然后考虑在用户向上/向下滚动网站时调用样式，最好使用 JavaScript 或 jQuery，如果这被证明太复杂的话。

/* create a relatively positioned wrapper 
        fpr the images */

.img-wrapper {
  position: relative;
  width: 25vw;
  z-index: 10;
}


/* fit absolute container to top left of img-wrapper.
        Fill the width of the wrapper */

.stack {
  position: absolute;
  width: 100%;
  height: fit-content;
}


/* stack the image centered in the img-wrapper */

.img-1 {
  z-index: 4;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}

.img-1:hover {
  opacity: 0;
  transform: translate(-50%) scale(1.25);
  transition-duration: 2s;
}

.img-2 {
  z-index: 3;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}

.img-2:hover {
  opacity: 0;
  transform: translate(-50%) scale(1.25);
  transition-duration: 2s;
}

.img-3 {
  z-index: 2;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}

.img-3:hover {
  opacity: 0;
}

.img-4 {
  z-index: 1;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}

.img-4:hover {
  opacity: 0;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF8" lang="eng">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Title</title>
  <link rel="stylesheet" href="styles/styles.css">
</head>
<header>Header Text</header>
<main>
  <h1>4 Images placed Over Each Other</h1>
  <div class="img-wrapper">
    <!-- 'overflow: hidden' to stop image bleed outside of div
            which doesn't work :( -->
    <div style="overflow: hidden;">
      <img class="stack img-1" src="https://images.unsplash.com/photo-1502359521992-f86fd62e12dd" alt="african chillites">
    </div>

    <img class="stack img-2" src="https://images.unsplash.com/photo-1509085051020-b0707cdec216" alt="african chillites">
    <img class="stack img-3" src="https://images.unsplash.com/photo-1526179969422-e92255a5f223" alt="indian chillies" alt="african chillites">

    <img class="https://images.unsplash.com/photo-1518843875459-f738682238a6" alt="fresh veg" alt="african chillites">

  </div>
</main>

<body>
</body>

</html>

正如我试图描述的那样，随着下面的每个图像都被完全显示出来，我预计变换/过渡会向下层叠。这显然不是这种情况，只适用于最上面的图像。

至于 div 外部的图像在缩放时溢出，我不确定除了overflow: hidden;在容器上之外还能尝试什么，这是行不通的。如果我将该样式应用于class="img-wrapperdiv，图像就会消失！

任何关于去哪里的帮助或建议将不胜感激。

更新：

我添加了图像的工作链接，以便有一个我试图解决的问题的可用演示。

非常感谢所有可以做出贡献的人。

附录

我想我会添加这个工作示例来阐明我想要实现的目标： Adobe Spark 示例。这适用于我尝试过的真实手机（各种三星触摸屏）以及 Chrome 和 Firefox 70.0.1 开发工具响应视图，但它不适用于 Firefox 开发版 71.0b9（64 位）响应视图。

我的主要障碍是随着用户滚动而缩放/淡入的堆叠图像。我在桌面上尝试了 Skrollr 并取得了巨大的成功，但没有办法让它在移动设备上运行。

如果对可以实现我的目标的替代插件/库有任何建议，我将非常感谢听到它们。我认为尝试使用我自己的 JavaScript 来做到这一点对于我目前的编程能力来说太过分了！：-/

谢谢阅读。

标签： javascripthtmlcss

解决方案

推荐阅读