Animate moving div from bottom to top on hover

Question

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 bottom, but with a nice smooth animation that does this. The animation must play on hover. I already figured out how to do this, but I don't have the animation.

This is roughly what the HTML looks like:

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

And this is the (stripped) css:

.box {
    position: relative;
}

.box_content {
    position: absolute;
    top: 0;
    left: 0;
}

.title {
    position: absolute;
    bottom: 0;            /* This moves it to the bottom (initial state) */
    width: 100%;
    height: 20%;
    background: rgb(148, 193, 31);
    background: rgba(148, 193, 31, 0.5);
}

.box:hover .title {
    top: 0;            /* This moves it to the top (only on hover) */
}

Now this works, but I want a visual animation that move the title div to the top, or bottom. The difficult part is that, as I mentioned earlier, the div is variable in size. That means that you can't just use something like top: 300px and top: 0 to switch between top and bottom.

How would I do this? Is it even possible using pure CSS? And what would I need to do if I used JQuery?

.

Another thing to note is that this is just in development. The final product should also include a paragraph on hover like shown in this picture:

This paragraph moves up from somewhere behind the surrounding, simultaneously to the title. I'm not asking how to do that in this question, unless thing ridiculously changes the way this whole thing should/could be done.

Answer 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>