child div content not visible when outside parent div

Question

I got 3 divs next to each other in another div.
When I hover over a div, the div popsout.
That's working but as you can see in the image the div content is cut of by his parent div (the red/pink vertical bar).
How can I make the content visible?

Complete JS Fiddle Demo

.pakket {
    width: 291px;
    height: 371px;
    border: 1px solid #F5F5EF;
    float: left;
    background: url(../images/view.png) no-repeat bottom right;
    margin-left: -1px;
    z-index: 1;
}

.pakket:hover {
    background: #ffffff;
    border: 1px solid #5A5858;
    width: 315px;
    height: 390px;
    margin: -10px -13px -15px -12px;
    z-index: 2;
    position: relative;
}

Answer 1

As per your requirements i think this would be more suitable.

DEMO

CSS

.ma-main-container.col1-layout {
    margin: 20px;
    overflow:visible;
    width: 100%;
}