title: Float image outside of parent container
body: <p>Firstly, I know this may seem like a duplicate of <a href="https://stackoverflow.com/questions/22705723/positioning-child-content-outside-of-parent-container">Positioning child content outside of parent container</a>, but this is slightly different.</p>
  <p>I've only had success floating an image outside of its parent container if I use an absolutely positioned div with the <code>background-image</code> set. Example of code used to achieve this:</p>
  <pre><code>.image {
      position: absolute;
      top: 0;
      left: 0;
      margin-top: -30px;
      margin-left: -10px;
      display: block;
      height: 200px;
      width: 140px;
  }
  </code></pre>
  <p>Now I need to achieve the same with an <code>&lt;img /&gt;</code> element. What I'm hoping to achieve is something like this:</p>
  <p><img src="https://i.stack.imgur.com/8h7Ka.gif" alt="enter image description here" /></p>
  <p>So the image should actually spill over on the left and right of the parent container. I've tried similar methids as given above, but without success. Any advice?</p>