Here is a codepen: https://codepen.io/jon424/pen/XWzGNLe
In this example, if you select the toggle
button, the image will be covered by another div. The white square will gradually cover the image from the top of the image to the bottom.
I simply want to reverse this effect. I want the white square to cover the image, moving from the bottom of the image to the top.
I’ve tried using a negative value for max-height
in the .covered
class, but that wasn’t working. Any idea on how I can go about doing this?
HTML
<button>Toggle</button>
<div class="parent">
<img class="child1" src="https://picsum.photos/200/300">
<div class="child1 child2"></div>
</div>
CSS
.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;
}
JS
document.querySelector('.child2').classList.add('covered');
document.querySelector('button').addEventListener('click', () => { document.querySelector('.child2').classList.toggle('covered');});