CSS Transition: Cover Image From Bottom To Top-CodePudding

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 >
  <img  src="https://picsum.photos/200/300">
  <div ></div>
</div>

CodePudding user response：

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

CodePudding user response：

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 >
  <img  src="https://picsum.photos/200/300">
  <div ></div>
</div>

CodePudding user response：

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 >
  <img  src="https://picsum.photos/200/300">
  <div ></div>
</div>

CodePudding user response：

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 >
  <img  src="https://picsum.photos/200/300">
</div>
</div>