I have something like the following :

```
<div class="one-third">
    <div class="inside">
        <h4><strong>How much can you save?</strong></h4>
        <p>testing</p>
        <p>testing</p>
        <p>testing</p>
        <p>testing</p>
    </div>
    <div class="caption">caption here</div>
</div>

```

I want to be able to slide in a caption (the div caption) from the bottom that rests on the bottom during hover and slide out the bottom when not hovered. I've looked at a few sources from here and there but can't seem to get it right. It's also important that the main container (one-third) in this case does not resize; the caption should be within it. How can I accomplish this?