CSS Transition: Cover Image From Bottom To Top

user_12114075 0
Viewed 192

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?

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>

css-transitions css javascript
4 Answers

Very simple: change the top: 0; attribute in .child1 to bottom: 0;

user_178029280

By adding those lines on .child2 I am getting I think what you want:

 bottom:0;
 top:unset;

Here is the full working example:

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>

user_152886410

Here is another way to do it you can manipulate the top of the 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>

user_73835200

Not sure but are you looking for this type of effect, I know CSS solution if this help you.

.parent {
  position: relative;
}

.parent::before {
  content: "";
  position: absolute;
  height: 0;
  width: 100%;
  background-color: white;
  bottom: 100%;
  left: 0;
  transition: all 0.9s ease-in-out;
}

.parent:hover::before {
  height: 100%;
  bottom: 0;
  -webkit-transition: height 0.9s ease;
  transition: height 0.9s ease;
}
<div class="parent">
  <img class="child1" src="https://picsum.photos/200/300">
</div>
</div>

user_118502590
Related