Hang image off screen without breaking responsivness
<p>I'm having an issue hanging an image outside of it's container / off screen without it breaking responsiveness of the website. The main issue is that you have to scroll right and left based on how the image is positioned.</p>

<p>Here's an example of what I'm trying to achieve (the product images left and right as you scroll down):
<a href="http://invisionapp.com/" rel="nofollow">http://invisionapp.com/</a></p>

<p>Here's where I'm at so far:
<a href="http://codepen.io/darcyvoutt/pen/EKRmOZ" rel="nofollow">http://codepen.io/darcyvoutt/pen/EKRmOZ</a></p>

<p>The code on the image is:</p>

<pre><code>.section {
  height: 505px;
}

.left, .right {
  display: block;
  float: left;
  width: 50%;
}

.left {
  background: yellow;
}

.right {
  position: relative;  
}

.image {
  max-width: none !important;
  height: 507px !important;
  width: 873px !important;
  display: block;
}
</code></pre>

<p>Let me know if you have any questions for something I left out by accident.</p>