Big image in smaller text column

Hi,
i like layouts with small text columns an bigger images between… like this:

as the contents comes from a database i want to seperate them from HTML code…

I know how to achieve this by closing the parent element first and then add another block below and give it full width.

but i wonder if there are any css classes out there, that allow making the image bigger than its parent.

something like

<p>
text text text
</p>

<div class="bigger_image">
[image]
</div>

<p>
lablaba
</p>

but without closing the parent div first…

Not by default in Foundation Sites, you have to create them.
Also overflow might be some solution with position.