Drop Shadow on a Div Container

css box shadow on a div container cut off

I would add some padding to the .container element and ensure that your #content stays at the width you need.

box-shadow not showing on div element

Clip path is cutting off your shadow. A workaround for this is to create a parent div for the element, then put the box-shadow on that. Then use filter to follow the path of your imagem-container (otherwise it will be a square box shadow). This article might help: https://css-tricks.com/using-box-shadows-and-clip-path-together/

How can I make box shadow show over the next element in a container?

Just add to your block position: relative on hover and give him biggest z-index.
JsFiddle link

Div drop shadow being cut-off when parent div has overflow hidden

i have made minor changes in your HTML structure and some CSS changes as well. Look into it.

.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>

how to add box-shadow effect, only to border of div?

here is an example of achieving your goal!

We use the pseudo-element ::before and blur() effect.

div {  position: relative;  width: 344px;  height: 121px;  border: 2px solid #bed5e6;  border-radius: 2px;}
div::before {  content: '';  display: block;  position: absolute;  top: 5px;  left: 5px;  border: 5px solid rgba(0,0,0,.07);  border-radius: 2px;  width: 100%;  height: 100%;  filter: blur(4px);}

<div><h1>Test</h1></div>

box shadow to a div container

Check this JS Fiddle

CSS

 .trigger {
  float:left;
  }
 .panel {
  /*margin-top:47px;*/ 
 }

 .panel .front {
 /*position: absolute;*/
 }

is it possible to give the shadow inside the container?

Yes it is possible to add inner-shadow to an element, you just need to add inset along with your properties in box-shadow.

The presence of the inset keyword changes the shadow to one inside the
frame (as if the content was depressed inside the box). Inset shadows
are drawn inside the border (even transparent ones), above the
background, but below content.

.part-two{                float: left;                height:300px;                width: 200px;                background-color:green;                box-shadow: inset 0px 1px 10px 20px orange;}

<div id="part-two" class="part-two"></div>