Estoy tratando de crear una transición que mueva un div blanco encima de una imagen. Puedo hacer eso con UNA imagen actualmente, sin embargo, me gustaría poder hacer esto con dos o más imágenes...
Creo que el problema tiene algo que ver con la propiedad de position aquí, pero no estoy seguro de cuál sería la solución real.
Aquí hay un codepen: https://codepen.io/jon424/pen/XWzGNLe Cuando hace clic en "alternar", verá que la transición ocurre sobre la primera imagen, pero me gustaría que sucediera lo mismo sobre la segunda imagen en al mismo tiempo. ¿Alguna idea de cómo hacer esto?
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');});Para apuntar a muchos Elementos de la misma clase, use querySelectorAll() y luego 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>