Expand centered div to top and bottom on hover

Question

I´ve got a problem with a hover effect I´m trying to achieve. I got 3 centered div´s next to each other. When I hover over one of them I want that div to expand to the bottom and top and reveal more content. Anyone knows how this is possible with CSS and/or jQuery? Heres an image of what I´m trying to do.

Hover animation http://i62.tinypic.com/ek511t.png

http://www.7daysinhavana.com/ did that effect to the width of an element. But looking in their css code revealed that they were working with multiple background images.

Thanks for your reply!

Answer 1

I'm still not sure what exactly is the problem. But I guess you wanna display you hover-boxes a bit more centered over the navigation bar. So is this what you are looking for?:

http://jsfiddle.net/MYpzD/3/

I modified your css:

#container{
   position: absolute;
   top: 50%;

   left: 0;
   width: 100%;
}

.leistungen{
    .leistung{
        width: 33.33%;
        position:relative;
        float: left;
        background-color: #323a98;
        color: #fff;
        .infos{
            display:none;
        }
        &:hover{
            height: 100%;
            .infos{
                display:block;
                position:absolute;
                top:-30px;
                left:-50px;
                background-color:#323a98;
                z-index:10;
                }
            }
    }
}

I gave the hover boxes an absolute position and the parent div a relative, so I could add negative distances to move them a bit up and left. I had to give them a backgroundcolor too and a z-index to hide what's under the hover boxes.

EDIT

http://jsfiddle.net/MYpzD/4/ In this fiddle a new width and a border and a padding for the text is added.