Div Schlagschatten wird abgeschnitten, wenn Eltern Div hat Überlauf versteckt

Question

Ich habe eine aktuelle Frage, in der eine certain portion of an image inside the div should only be displayed.. Ich habe es ein wenig auf meine Bedürfnisse angepasst. Jetzt, wenn ich einen box-shadow auf dem .img-card-container hinzufügen, wird der Schlagschatten abgeschnitten.

Beachten Sie, dass ich eine overflow:hidden über die .img-bg-container habe. Dies ist das Beschneiden des Hintergrundbildes.

Hier ist ein jsfiddle.

.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); 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="row grid-container"> 
 
    <div class="col-md-12"> 
 
    <div class="row"> 
 
     <div class="col-md-5"> 
 
     <div class="row img-container img-featured"> 
 
      <div class="col-md-12"> 
 
      <a href="/posts/1"> 
 
       <img class="img-responsive img-thumbnail" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /> 
 
      </a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-7"> 
 
     <div class="row"> 
 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container"> 
 
      <div class="img-bg"> 
 
       <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
      </div> 
 
      <div class="img-card-container"> 
 
       <div class="img-card-item"> 
 
       <a href="/posts/1" class="img-sub"> 
 
        <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
       </a> 
 
       </div> 
 
       <div class="img-card-caption"> 
 
       <h3><a href="#">This is the video title</a></h3> 
 
       <span>Spongebob Squarepants</span> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container"> 
 
      <div class="img-bg"> 
 
       <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
      </div> 
 
      <div class="img-card-container"> 
 
       <div class="img-card-item"> 
 
       <a href="/posts/1" class="img-sub"> 
 
        <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
       </a> 
 
       </div> 
 
       <div class="img-card-caption"> 
 
       <h3><a href="#">This is the video title</a></h3> 
 
       <span>Spongebob Squarepants</span> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container"> 
 
      <div class="img-bg"> 
 
       <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
      </div> 
 
      <div class="img-card-container"> 
 
       <div class="img-card-item"> 
 
       <a href="/posts/1" class="img-sub"> 
 
        <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
       </a> 
 
       </div> 
 
       <div class="img-card-caption"> 
 
       <h3><a href="#">This is the video title</a></h3> 
 
       <span>Spongebob Squarepants</span> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="row next-row"> 
 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container"> 
 
      <div class="img-bg"> 
 
       <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
      </div> 
 
      <div class="img-card-container"> 
 
       <div class="img-card-item"> 
 
       <a href="/posts/1" class="img-sub"> 
 
        <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
       </a> 
 
       </div> 
 
       <div class="img-card-caption"> 
 
       <h3><a href="#">This is the video title</a></h3> 
 
       <span>Spongebob Squarepants</span> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container"> 
 
      <div class="img-bg"> 
 
       <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
      </div> 
 
      <div class="img-card-container"> 
 
       <div class="img-card-item"> 
 
       <a href="/posts/1" class="img-sub"> 
 
        <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
       </a> 
 
       </div> 
 
       <div class="img-card-caption"> 
 
       <h3><a href="#">This is the video title</a></h3> 
 
       <span>Spongebob Squarepants</span> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container"> 
 
      <div class="img-bg"> 
 
       <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
      </div> 
 
      <div class="img-card-container"> 
 
       <div class="img-card-item"> 
 
       <a href="/posts/1" class="img-sub"> 
 
        <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
       </a> 
 
       </div> 
 
       <div class="img-card-caption"> 
 
       <h3><a href="#">This is the video title</a></h3> 
 
       <span>Spongebob Squarepants</span> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

i als auch kleine Änderungen in der HTML-Struktur und einige CSS Änderungen vorgenommen haben. Schau in Es hinein.

.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: 150px; 
 
    /* anyhow you have given fixed height in other divs */ 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    z-index: -10; 
 
    overflow: hidden; 
 
    /* prevent image from going out */ 
 
} 
 
.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 { 
 
    margin-bottom: 15px; 
 
    position: relative; 
 
} 
 
.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); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="row grid-container"> 
 
    <div class="col-md-12"> 
 
    <div class="row"> 
 
     <div class="col-md-5"> 
 
     <div class="row img-container img-featured"> 
 
      <div class="col-md-12"> 
 
      <a href="/posts/1"> 
 
       <img class="img-responsive img-thumbnail" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /> 
 
      </a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-7"> 
 
     <div class="row"> 
 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 
      <div class="img-bg-container"> 
 
       <div class="img-bg"> 
 
       <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
       </div> 
 
       <div class="img-card-container"> 
 
       <div class="img-card-item"> 
 
        <a href="/posts/1" class="img-sub"> 
 
        <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
        </a> 
 
       </div> 
 
       <div class="img-card-caption"> 
 
        <h3><a href="#">This is the video title</a></h3> 
 
        <span>Spongebob</span> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 
      <div class="img-bg-container"> 
 
       <div class="img-bg"> 
 
       <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
       </div> 
 
       <div class="img-card-container"> 
 
       <div class="img-card-item"> 
 
        <a href="/posts/1" class="img-sub"> 
 
        <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
        </a> 
 
       </div> 
 
       <div class="img-card-caption"> 
 
        <h3><a href="#">This is the video title</a></h3> 
 
        <span>Spongebob</span> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 
      <div class="img-bg-container"> 
 
       <div class="img-bg"> 
 
       <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
       </div> 
 
       <div class="img-card-container"> 
 
       <div class="img-card-item"> 
 
        <a href="/posts/1" class="img-sub"> 
 
        <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
        </a> 
 
       </div> 
 
       <div class="img-card-caption"> 
 
        <h3><a href="#">This is the video title</a></h3> 
 
        <span>Spongebob</span> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="row next-row"> 
 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 
      <div class="img-bg-container"> 
 
       <div class="img-bg"> 
 
       <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
       </div> 
 
       <div class="img-card-container"> 
 
       <div class="img-card-item"> 
 
        <a href="/posts/1" class="img-sub"> 
 
        <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
        </a> 
 
       </div> 
 
       <div class="img-card-caption"> 
 
        <h3><a href="#">This is the video title</a></h3> 
 
        <span>Spongebob</span> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 
      <div class="img-bg-container"> 
 
       <div class="img-bg"> 
 
       <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
       </div> 
 
       <div class="img-card-container"> 
 
       <div class="img-card-item"> 
 
        <a href="/posts/1" class="img-sub"> 
 
        <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
        </a> 
 
       </div> 
 
       <div class="img-card-caption"> 
 
        <h3><a href="#">This is the video title</a></h3> 
 
        <span>Spongebob</span> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 
      <div class="img-bg-container"> 
 
       <div class="img-bg"> 
 
       <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
       </div> 
 
       <div class="img-card-container"> 
 
       <div class="img-card-item"> 
 
        <a href="/posts/1" class="img-sub"> 
 
        <img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" /> 
 
        </a> 
 
       </div> 
 
       <div class="img-card-caption"> 
 
        <h3><a href="#">This is the video title</a></h3> 
 
        <span>Spongebob</span> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>