Animate Moving Div From Bottom To Top On Hover

I have a picture with a text overlay, inside a box. This is a responsive design, so the box does not have fixed dimensions. I want to move the text overlay from the top to the bott

Solution 1:

You could do this using CSS transition.

Rather than giving it an initial position of bottom: 0, you could give it top: 80% (100% - height of .title). Then on :hover change it to top: 0.

Fiddle

.box {
  position: relative;
}
.box_content {
  position: absolute;
  top: 0;
  left: 0;
}
.title {
  position: absolute;
  top: 80%;
  /* This moves it to the bottom (initial state) */
  width: 100%;
  height: 20%;
  background: rgb(148, 193, 31);
  background: rgba(148, 193, 31, 0.5);
  -webkit-transition: top 1s;
  transition: top 1s;
}
.box:hover .title {
  top: 0;
  /* This moves it to the top (only on hover) */
}

<div class="box">
  <div class="box_content">
    <img class="inner_img" src="http://placehold.it/1000x1000" />
    <div class="title">The Title</div>
  </div>
</div>