title: CSS: Make an image to bleed outside parent container
body: <p>Here is the look I want to achieve:</p>
  
  <p><img src="https://i.stack.imgur.com/FBgEs.png" alt="enter image description here"></p>
  
  <p>I'm using SkeletonJS 16-column grid framework. Here is the relevant code:</p>
  
  <pre><code>&lt;div class="container section" id="features"&gt;
    &lt;div class="one-third column"&gt;
      &lt;h5 class="underline"&gt;Waterproof&lt;/h5&gt;
      &lt;div class="textbox"&gt;
        &lt;p&gt;Lorem ipsum&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  .section h5 {
    font-size: 1.2rem;
    text-transform: uppercase;
  }
  
  .section h5.underline {
    color: #437356;
    background: #f4f0e4;
    margin: 12px 0 12px 0;
    border-radius: 2px;
    padding: 8px 12px;
    font-weight: 700;
  }
  </code></pre>
  
  <p>My ultimate goal is to transform an h5 underline into this:</p>
  
  <pre><code>&lt;h5 class="underline"&gt;Waterproof&lt;img class="image" src=""/&gt;&lt;/h5&gt;
  </code></pre>
  
  <p>and therefore to find an elegant set of CSS rules to make the image look like on attached design. I'm still an apprentice in CSS, so if everyone has a solution for that please drop me a potion or two. Thanks!</p>