title: CSS box-shadow VS overflow hidden
body: <p>I have created a carousel, and I'd like to add box-shadow property on the carousel items. This is not possible, because of the carousel's overflow:hidden property.</p>
  
  <p>Is there anyway to overcome that?</p>
  
  <p><a href="https://jsfiddle.net/ktsixit/xe9zkqhp/1/" rel="nofollow">Please check this fiddle</a></p>
  
  <p>*Carousel is not working properly, for some reason, but you can see the css issue anyway</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
              &lt;div id="myCarousel" class="carousel slide" data-interval="false"&gt;
                  &lt;!-- Carousel items --&gt;
                  &lt;div class="carousel-inner"&gt;
                      &lt;div class="item active"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-xs-4 product-item"&gt; &lt;a href="#"&gt;&lt;img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""&gt;&lt;/a&gt;
  
                                      &lt;h4&gt;&lt;a href="#"&gt;Product Name&lt;/a&gt;&lt;/h4&gt;
  
                                  &lt;div class="price"&gt;€ 25.00&lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-xs-4 product-item"&gt; &lt;a href="#"&gt;&lt;img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""&gt;&lt;/a&gt;
  
                                      &lt;h4&gt;&lt;a href="#"&gt;Product Name&lt;/a&gt;&lt;/h4&gt;
  
                                  &lt;div class="price"&gt;€ 25.00&lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-xs-4 product-item"&gt; &lt;a href="#"&gt;&lt;img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""&gt;&lt;/a&gt;
  
                                      &lt;h4&gt;&lt;a href="#"&gt;Product Name&lt;/a&gt;&lt;/h4&gt;
  
                                  &lt;div class="price"&gt;€ 25.00&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!--/row--&gt;
                      &lt;/div&gt;
                      &lt;!--/item--&gt;
                      &lt;div class="item"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-xs-4 product-item"&gt; &lt;a href="#"&gt;&lt;img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""&gt;&lt;/a&gt;
  
                                      &lt;h4&gt;&lt;a href="#"&gt;Product Name&lt;/a&gt;&lt;/h4&gt;
  
                                  &lt;div class="price"&gt;€ 63.00&lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-xs-4 product-item"&gt; &lt;a href="#"&gt;&lt;img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""&gt;&lt;/a&gt;
  
                                      &lt;h4&gt;&lt;a href="#"&gt;Product Name&lt;/a&gt;&lt;/h4&gt;
  
                                  &lt;div class="price"&gt;€ 24.00&lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-xs-4 product-item"&gt; &lt;a href="#"&gt;&lt;img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""&gt;&lt;/a&gt;
  Product Name&lt;/a&gt;
                                  &lt;/h4&gt;
                                  &lt;div class="price"&gt;€ 25.00&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!--/row--&gt;
                      &lt;/div&gt;
                      &lt;!--/item--&gt;
                      &lt;div class="item"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-xs-4 product-item"&gt; &lt;a href="#"&gt;&lt;img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""&gt;&lt;/a&gt;
  
                                      &lt;h4&gt;&lt;a href="#"&gt;Product Name&lt;/a&gt;&lt;/h4&gt;
  
                                  &lt;div class="price"&gt;€ 42.00&lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-xs-4 product-item"&gt; &lt;a href="#"&gt;&lt;img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""&gt;&lt;/a&gt;
  Product Name&lt;/a&gt;
                                  &lt;/h4&gt;
                                  &lt;div class="price"&gt;€ 25.00&lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-xs-4 product-item"&gt; &lt;a href="#"&gt;&lt;img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""&gt;&lt;/a&gt;
  
                                      &lt;h4&gt;&lt;a href="#"&gt;Product Name&lt;/a&gt;&lt;/h4&gt;
  
                                  &lt;div class="price"&gt;€ 54.00&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!--/row--&gt;
                      &lt;/div&gt;
                      &lt;!--/item--&gt;
                  &lt;/div&gt;
                  &lt;!--/carousel-inner--&gt;
                  &lt;div class="carousel-nav"&gt; &lt;a class="carousel-control prev" href="#myCarousel" data-slide="prev"&gt;&lt;/a&gt;
   &lt;a class="carousel-control next" href="#myCarousel" data-slide="next"&gt;&lt;/a&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!--/myCarousel--&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css (I'm not posting the full css code here, because it wouldn't be readable, here are the most important styles about this issue):</p>
  
  <pre><code>.product-item {
      position: relative;
      padding-top: 20px;
  }
  .product-item:hover {
      -webkit-box-shadow: 0px 3px 13px 0px rgba(50, 50, 50, 0.5);
      -moz-box-shadow: 0px 3px 13px 0px rgba(50, 50, 50, 0.5);
      box-shadow: 0px 3px 13px 0px rgba(50, 50, 50, 0.5);
      z-index: 100;
  }
  </code></pre>
  
  <p>JAVASCRIPT</p>
  
  <pre><code>jQuery('.carousel').each(function () {
      jQuery(this).carousel({
          interval: false
      });
  });
  </code></pre>