Here is an example: <https://codepen.io/jon424/pen/XWzGNLe>

I have a button here that lets you toggle the visibility of an image. When the button is clicked, the image disappears from the bottom to the top. When you click the button again, the image reappears from the top to the bottom.

I would like the transition to move in the same direction each time. So, when the user sees the image and clicks on the button, the image disappears from the bottom to the top. When the user clicks the button again, the image reappears from the bottom to the top.

Is there a way to use transitions without this kind of “alternating” activity?

HTML

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

```

CSS

```css
.parent {
     position: relative;
     overflow: hidden;
     width: 300px;
     height: 300px;
     margin: 10px;
}
 .child {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
}
 .covering {
     z-index: 1;
     background: #fff;
     transition: transform 1s ease-in-out;
     transform: translateY(100%);
}
 .covered {
     transform: translateY(0%);
}

```

JS

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

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

```