title: Div drop shadow being cut-off when parent div has overflow hidden
body: <p>I have a recent question wherein a <a href="https://stackoverflow.com/questions/39326973/show-only-certain-portions-of-image-inside-a-div">certain portion of an image inside the div should only be displayed.</a>. I modified it a bit base on my needs. Now that when I add a <code>box-shadow</code> on the <code>.img-card-container</code>, the drop shadow is being cut-off. </p>
  
  <p>Notice that I have an <code>overflow:hidden</code> on the <code>.img-bg-container</code>. This is to crop the background image.</p>
  
  <p>Here's a <a href="https://jsfiddle.net/y573zfja/8/" rel="nofollow noreferrer">jsfiddle</a>.</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;
    width: 100%;
    display: block;
    position: relative;
  }
  .img-sub img {
    height: 100%;
    position: absolute;
    margin: 0 auto;
    left: -50%;
    width: auto;
  }
  .row.next-row {
    padding-top: 30px;
  }
  .img-card-caption {
    background-color: #fff;
    min-height: 60px;
    max-height: 60px;
    padding: 10px;
  }
  .img-card-caption h3 {
    font-size: 1em;
    margin: 0;
    padding: 0;
  }
  .img-card-caption span {
    color: #999;
  }
  .img-bg {
    background-color: #fff;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: -10;
  }
  .img-bg img {
    position: absolute;
    height: auto;
    width: 100%;
    left: -100%;
    right: -100%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
    z-index: -10;
  }
  .img-bg-container {
    display: inline-block;
    overflow: hidden;
  }
  .img-sub img {
    height: 100%;
    position: absolute;
    margin: 0 auto;
    left: -50%;
    right: -50%;
    width: auto;
  }
  .img-card-container {
    -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8);
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
   
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&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="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container"&gt;
              &lt;div class="img-bg"&gt;
                &lt;img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /&gt;
              &lt;/div&gt;
              &lt;div class="img-card-container"&gt;
                &lt;div class="img-card-item"&gt;
                  &lt;a href="/posts/1" class="img-sub"&gt;
                    &lt;img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /&gt;
                  &lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="img-card-caption"&gt;
                  &lt;h3&gt;&lt;a href="#"&gt;This is the video title&lt;/a&gt;&lt;/h3&gt;
                  &lt;span&gt;Spongebob Squarepants&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container"&gt;
              &lt;div class="img-bg"&gt;
                &lt;img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /&gt;
              &lt;/div&gt;
              &lt;div class="img-card-container"&gt;
                &lt;div class="img-card-item"&gt;
                  &lt;a href="/posts/1" class="img-sub"&gt;
                    &lt;img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /&gt;
                  &lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="img-card-caption"&gt;
                  &lt;h3&gt;&lt;a href="#"&gt;This is the video title&lt;/a&gt;&lt;/h3&gt;
                  &lt;span&gt;Spongebob Squarepants&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container"&gt;
              &lt;div class="img-bg"&gt;
                &lt;img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /&gt;
              &lt;/div&gt;
              &lt;div class="img-card-container"&gt;
                &lt;div class="img-card-item"&gt;
                  &lt;a href="/posts/1" class="img-sub"&gt;
                    &lt;img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /&gt;
                  &lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="img-card-caption"&gt;
                  &lt;h3&gt;&lt;a href="#"&gt;This is the video title&lt;/a&gt;&lt;/h3&gt;
                  &lt;span&gt;Spongebob Squarepants&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row next-row"&gt;
            &lt;div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container"&gt;
              &lt;div class="img-bg"&gt;
                &lt;img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /&gt;
              &lt;/div&gt;
              &lt;div class="img-card-container"&gt;
                &lt;div class="img-card-item"&gt;
                  &lt;a href="/posts/1" class="img-sub"&gt;
                    &lt;img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /&gt;
                  &lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="img-card-caption"&gt;
                  &lt;h3&gt;&lt;a href="#"&gt;This is the video title&lt;/a&gt;&lt;/h3&gt;
                  &lt;span&gt;Spongebob Squarepants&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container"&gt;
              &lt;div class="img-bg"&gt;
                &lt;img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /&gt;
              &lt;/div&gt;
              &lt;div class="img-card-container"&gt;
                &lt;div class="img-card-item"&gt;
                  &lt;a href="/posts/1" class="img-sub"&gt;
                    &lt;img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /&gt;
                  &lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="img-card-caption"&gt;
                  &lt;h3&gt;&lt;a href="#"&gt;This is the video title&lt;/a&gt;&lt;/h3&gt;
                  &lt;span&gt;Spongebob Squarepants&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container"&gt;
              &lt;div class="img-bg"&gt;
                &lt;img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /&gt;
              &lt;/div&gt;
              &lt;div class="img-card-container"&gt;
                &lt;div class="img-card-item"&gt;
                  &lt;a href="/posts/1" class="img-sub"&gt;
                    &lt;img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /&gt;
                  &lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="img-card-caption"&gt;
                  &lt;h3&gt;&lt;a href="#"&gt;This is the video title&lt;/a&gt;&lt;/h3&gt;
                  &lt;span&gt;Spongebob Squarepants&lt;/span&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>