CSS 过渡到多个图像

Question

我正在尝试创建一个在图像顶部移动白色 div 的过渡。我目前可以用一张图片做到这一点，但是，我希望能够用两张或更多图片做到这一点……

我认为这个问题与这里的 position 属性有关，但我不确定实际的解决方案是什么。

这是一个代码笔：https://codepen.io/jon424/pen/XWzGNLe 当你点击“toggle”时，你会看到第一张图片发生了转换，但我希望同样的事情同时发生在第二张图片上。知道怎么做吗？

HTML

 <button>Toggle</button>
<div class="parent">
  <img class="child1" src="https://picsum.photos/200/300">
      <div class="child1 covering"></div></div>

<div class="parent">
  <img class="child2" src="https://picsum.photos/200/302">
      <div class="child2 covering"></div></div>

CSS

.parent {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 10px;
}

.child1 {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
}

.child2 {
/*     position: absolute; */
  width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
}

.covering {
    z-index: 1;
    background: #ffffff;
    transition: max-height 1s ease-in-out;
    max-height:100%;
}

.covered {
  max-height: 0px;
}

.hidden {
  display: none;
}

JS

const firstTarget = document.querySelector(".firstTarget");
const covering = document.querySelector(".covering");

document.querySelector('.covering').classList.add('covered');
document.querySelector('button').addEventListener('click', () => { document.querySelector('.covering').classList.toggle('covered');});

Answer 1

要定位相同 class 的多个元素，请使用 querySelectorAll() and than use NodeList.forEach()

// DOM utility functions:

const ELS = (sel, par) => (par || document).querySelectorAll(sel);
const EL = (sel, par) => (par || document).querySelector(sel);


// Task:

const ELS_covering = ELS(".covering"); // Get them all!

EL('button').addEventListener('click', () => {
  ELS_covering.forEach(el => el.classList.toggle('covered'));
});

.parent {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  width: 200px;
  height: 200px;
  margin: 10px;
}

.child {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

img.child {
  object-fit: cover;
}

.covering {
  z-index: 1;
  background: #eee;
  transition: transform 1s ease-in-out;
  transform: translateY(-100%);
  display: flex; justify-content: center; align-items: center;
}

.covered {
  transform: translateY(0%);
}

<button>Toggle</button>
<br>

<div class="parent">
  <img class="child" src="https://picsum.photos/200/300">
  <div class="child covering covered">Some text here</div>
</div>

<div class="parent">
  <img class="child" src="https://picsum.photos/300/302">
  <div class="child covering covered">Lorem Ipsum</div>
</div>

CSS 过渡到多个图像

CSS Transition Over More Than One Image

javascript

css

css-transitions