:before element not displaying outside div speech-bubble

:before element not displaying outside div speech-bubble

This is probably going to be a quick fix I just don't understand what's
going on.
I saw this answer to a question Create a complex css shape (speaking
bubble) and I wanted to make something like it. So in my attempt for some
reason the :before pseudo element is not displaying outside the "parent"
div. I'm trying to make it look like a speech bubble so I need the element
to display outside the div.
Here's my code
HTML
<div class="image">
<img class="test"
src="http://fc00.deviantart.net/fs71/f/2011/322/e/2/e292b11555866aec8666ded2e63ee541-d4gl4vg.png"
alt="leopard" />
</div>
CSS
body {
background-color: #333;
}
.image {
position:relative;
width:360px;
background:orange;
border-radius: 15px;
overflow: hidden;
margin-left: 15px;
}
.image:before {
position: absolute;
z-index: 1;
content: '';
background-color: #fff;
border: solid 0 transparent;
top: 50px; left: -1.25em;
width: 5em; height: 1em;
transform: rotate(45deg) skewX(75deg);
-moz-box-shadow: inset 0 0 5px #000000, -3px 0px 2px 6px #000;
-webkit-box-shadow: inset 0 0 5px #000000, -3px 0px 2px 6px #000;
box-shadow: inset 0 0 5px #000000, -3px 0px 2px 6px #000;
}
.test {
display:block;
width:100%;
}
Here is a codepen. Demo
Answers are appreciated.