I am trying to create a transition that moves a white div on top of an image. I can do that with ONE image currently, however, I would like to be able to do this with two or more images…
I think the issue has something to do with the position property here, but I am not sure what the actual solution would be.
Here is a codepen: https://codepen.io/jon424/pen/XWzGNLe When you click “toggle”, you will see the transition happen over the first image, but I would like the same thing to happen over the second image at the same time. Any idea how to do this?
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');});
To target many Elements of the same class, use 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>