Image sticking out of it's container

Question

How to make an image stick out of his container keeping it's transparent background? I see it a lot lately on many startup-like websites (as bellow). Could it be achieved by playing with overflow or translate property? Thanks a lot.

Edit: Here's a page from which the image is startup template

image sticking out of it's container

Answer 1

Try this:

.section-1 {
  height: 300px;
  background-color: #ddd;
}

.section-2 {
  position: relative;
  background-color: #eee;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.img-overlayed {
  position: relative;
  top: -155px;
  margin: 0 auto -155px;
}

<section class="section-1">
</section>
<section class="section-2">
  <img src="http://placehold.it/400x400" alt="" class="img-responsive img-overlayed">
</section>

So long as the image has transparency the background of the sections will show through.