Question

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?

Answer 1

DEMO — Something like this?

Uses CSS3 transition-duration (W3Schools) to create the animation.

Update:

DEMO — So you’re looking for the toaster effect?

Update 2:

DEMO — Animated using jQuery .animate() instead.