Show only certain portions of image inside a div
<p>How could I only show the image inside the div? Please refer to image below wherein only part of the image inside the blue highlighted part should be visible while the one boxed in red should not be shown leaving a space between images.</p>

<p><a href="https://i.stack.imgur.com/BoLyx.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BoLyx.jpg" alt="enter image description here"></a></p>

<p>Output would be the image below.
<a href="https://i.stack.imgur.com/Xdk7O.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xdk7O.jpg" alt="enter image description here"></a></p>

<p>Here's a <a href="https://jsfiddle.net/ee8hkxsd/1/" rel="nofollow noreferrer">jsfiddle</a>.</p>

<p>I've pasted the code here as well.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.img-sub {
  height: 150px;
  overflow: hidden;
}
.img-sub img {
  height: 100%;
  position: absolute;
  margin: 0 auto;
  left: -100%;
  right: -100%;
  width: auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-fluid"&gt;
  &lt;div class="row grid-container"&gt;
    &lt;div class="col-md-12"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-5"&gt;
          &lt;div class="row img-container img-featured"&gt;
            &lt;div class="col-md-12"&gt;
              &lt;a href="/posts/1"&gt;
                &lt;img class="img-responsive img-thumbnail" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /&gt;
              &lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-7"&gt;
          &lt;div class="row"&gt;
            &lt;div class="img-container"&gt;
              &lt;div class="col-md-4 img-sub"&gt;
                &lt;a href="/posts/1"&gt;
                  &lt;img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4 img-sub"&gt;
                &lt;a href="/posts/1"&gt;
                  &lt;img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4 img-sub"&gt;
                &lt;a href="/posts/1"&gt;
                  &lt;img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /&gt;
                &lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div class="img-container"&gt;
              &lt;div class="col-md-4 img-sub"&gt;
                &lt;a href="/posts/1"&gt;
                  &lt;img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4 img-sub"&gt;
                &lt;a href="/posts/1"&gt;
                  &lt;img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4 img-sub"&gt;
                &lt;a href="/posts/1"&gt;
                  &lt;img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /&gt;
                &lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>