Aquí hay un codepen: https://codepen.io/jon424/pen/XWzGNLe
En este ejemplo, si selecciona el botón de toggle , la imagen quedará cubierta por otro div. El cuadrado blanco cubrirá gradualmente la imagen desde la parte superior de la imagen hasta la parte inferior.
Simplemente quiero revertir este efecto. Quiero que el cuadrado blanco cubra la imagen, moviéndose desde la parte inferior de la imagen hacia la parte superior.
Intenté usar un valor negativo para max-height en la clase .covered , pero no funcionó. ¿Alguna idea de cómo puedo hacer esto?
document.querySelector('.child2').classList.add('covered'); document.querySelector('button').addEventListener('click', () => { document.querySelector('.child2').classList.toggle('covered'); }); .parent { position: relative; width: 300px; height: 300px; margin: 10px; overflow: hidden; } .child1 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .child2 { z-index: 1; background: #ffffff; transition: max-height 1s ease-in-out; max-height:100%; } .covered { max-height: 0px; } <button>Toggle</button> <div class="parent"> <img class="child1" src="https://picsum.photos/200/300"> <div class="child1 child2"></div> </div>Muy simple: cambia la top: 0; atributo en .child1 hasta bottom: 0;
Al agregar esas líneas en .child2 , obtengo lo que quieres:
bottom:0; top:unset;Aquí está el ejemplo de trabajo completo:
document.querySelector(".child2").classList.add("covered"); document.querySelector("button").addEventListener("click", () => { document.querySelector(".child2").classList.toggle("covered"); }); .parent { position: relative; width: 300px; height: 300px; margin: 10px; overflow: hidden; } .child1 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .child2 { z-index: 1; background: #ffffff; transition: max-height 1s ease-in-out; max-height: 100%; bottom:0; top:unset; } .covered { max-height: 0px; } <button>Toggle</button> <div class="parent"> <img class="child1" src="https://picsum.photos/200/300"> <div class="child1 child2"></div> </div>Aquí hay otra forma de hacerlo, puede manipular la top del child2 :
document.querySelector('button').addEventListener('click', () => { document.querySelector('.child2').classList.toggle('covered');}); .parent { position: relative; width: 300px; height: 300px; margin: 10px; overflow: hidden; } .child1 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .child2 { position: absolute; top: 100%; z-index: 1; background: #ffffff; transition: top 1s ease-in-out; max-height: 100%; } .covered { top: 0px; } <button>Toggle</button> <div class="parent"> <img class="child1" src="https://picsum.photos/200/300"> <div class="child1 child2"></div> </div>