expand a div (on hover) on top of another div

Question

How to expand a div (on hover) on top of another div? How I can do something like is showed in the attached picture?

<article>
    <header>
        content title
    </header>
    <div>
        main article content
    </div>
    <div class="share_buttons">
        <div class="">SHARE</div>
        <div class="share_in">
            <a>FACEBOOK</a>
            <a>GOOGLE+</a>
            <a>LINKEDIN</a>
            <a>PICASA</a>
        </div>
    </div>
</article>

Answer 1

here, I made one from scratch, the whole thing, but is has a different (and better) HTML layout, and it also uses pure CSS, no JavaScript required.

EDIT 1 Updated JSFiddle Better example & Better CSS layout.

HTML

<div class='box'>
    <div class='box-cnt'>Lorem ipsum dolor sit amet, dicunt perpetua te mei. Vis id tritani utroque copiosae...</div>

    <div class='box-share'>
        <div class='share-title'>Share</div>
        <div class='share-items'>
            <div class='item'>Facebook</div>
            <div class='item'>Google</div>
            <div class='item'>MySpace</div>
        </div>
    </div> 
</div>

CSS

.box {
    width: 400px;
    height: auto;
    min-height: 300px;
    padding-bottom: 55px;
    border: 1px solid lightgray;
    position: relative;
}

.box-share {
    position: absolute;
    z-index: 2;
    bottom: 0;
    background: lightgray;
    width: 100%;
    height: 50px;
    overflow:hidden;
    transition: height 450ms;
    -moz-transition: height 450ms;
    -webkit-transition: height 450ms;
}

    .box-share:hover {
        height: 100px;
    }

.share-title {
    height: 50px;
    width: 100%;
    text-align: center;
    line-height: 3.2;
}

.share-items {
    width: 100%;
    height: 50px;
}

.box-cnt {
    width: 100%;
    height: auto;
}

.item {display: inline-block;height: 100%;margin: 5px;}

Here is an example JSfiddle