CSS box-shadow VS overflow hidden

Question

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.

Is there anyway to overcome that?

Please check this fiddle

*Carousel is not working properly, for some reason, but you can see the css issue anyway

HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div id="myCarousel" class="carousel slide" data-interval="false">
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="row">
                            <div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>

                                    <h4><a href="#">Product Name</a></h4>

                                <div class="price">€ 25.00</div>
                            </div>
                            <div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>

                                    <h4><a href="#">Product Name</a></h4>

                                <div class="price">€ 25.00</div>
                            </div>
                            <div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>

                                    <h4><a href="#">Product Name</a></h4>

                                <div class="price">€ 25.00</div>
                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    <!--/item-->
                    <div class="item">
                        <div class="row">
                            <div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>

                                    <h4><a href="#">Product Name</a></h4>

                                <div class="price">€ 63.00</div>
                            </div>
                            <div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>

                                    <h4><a href="#">Product Name</a></h4>

                                <div class="price">€ 24.00</div>
                            </div>
                            <div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>
Product Name</a>
                                </h4>
                                <div class="price">€ 25.00</div>
                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    <!--/item-->
                    <div class="item">
                        <div class="row">
                            <div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>

                                    <h4><a href="#">Product Name</a></h4>

                                <div class="price">€ 42.00</div>
                            </div>
                            <div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>
Product Name</a>
                                </h4>
                                <div class="price">€ 25.00</div>
                            </div>
                            <div class="col-xs-4 product-item"> <a href="#"><img src="http://lopezmarine.com/wp-content/uploads/2013/09/500x500-490x490.gif" width="500" height="500" alt=""></a>

                                    <h4><a href="#">Product Name</a></h4>

                                <div class="price">€ 54.00</div>
                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    <!--/item-->
                </div>
                <!--/carousel-inner-->
                <div class="carousel-nav"> <a class="carousel-control prev" href="#myCarousel" data-slide="prev"></a>
 <a class="carousel-control next" href="#myCarousel" data-slide="next"></a>

                </div>
            </div>
            <!--/myCarousel-->
        </div>
    </div>
</div>

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):

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

JAVASCRIPT

jQuery('.carousel').each(function () {
    jQuery(this).carousel({
        interval: false
    });
});

score 1 · Answer 1 · answered Mar 09 '15 at 10:03

1

You could add another div inside .product-item and apply the shadow to that which should be visible due to the padding of your containing .product-item.

answered Mar 09 '15 at 10:03

Steven Hoskins

141
8

Your solution works but due to the desired design of the carousel, I'm not allowed to add more padding around each item. Is there any other way to fix this? – zekia Mar 09 '15 at 10:59

jeradg · Accepted Answer · 2015-03-09T12:02:35.517

(Note: First two suggestions are at the bottom. The first attempt didn't work once the JS was functioning. The second works, but doesn't fit with the OP's design restrictions per their comment.)

You won't be able to have a visible box-shadow around each .product-item if the .product-item padding and .container padding are the same. However, if you make the .container padding larger than the .product-item padding, you can use a negative margin-left and margin-right to expand the carousel's width outside of its parent element. This allows you to add padding to .item so the shadow is visible, while keeping the overflow: hidden on .carousel-inner, which allows the carousel to do its thing.

The easiest way would seem to be to just change the styling of .container-inner. However, because of the way the carousel's JS works, the transition between carousel slides breaks.

Broken fiddle: https://jsfiddle.net/80be2qoj/

As a workaround, you can add a .carousel-outer div around #myCarousel and do something like this:

https://jsfiddle.net/abfmatq6/

.container {
    padding-right: 25px;
    padding-left: 25px;
}
.carousel-outer {
    margin-top: 20px;
    padding: 18px 0;
    border-top: 1px solid #b8bec2;
    border-bottom: 1px solid #b8bec2;
}
.carousel.carousel {
    margin-top: 0;
    margin-left: -25px;
    margin-right: -25px;
    padding: 0;
    border: 0;
}
.carousel-nav.carousel-nav {
    bottom: -50px;
    left: 15px;
}
.item {
  padding: 25px;
}

Original suggestion

You could add some padding to .carousel-inner.

.carousel-inner {
    padding: 25px;
}
.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;
}

Fiddle: https://jsfiddle.net/cL4L8sd2/

Edit 1:

First thing: The carousel wasn't working because you hadn't enabled jQuery in the fiddle.

You should add the padding to .item, not to .carousel-inner. This works as expected:

.item {
  padding: 25px;
}

Working fiddle:

https://jsfiddle.net/tcLk3tnx/

Your solution works but due to the desired design of the carousel, I'm not allowed to add extra padding around each item. Is there any other way to fix this? — zekia, Mar 09 '15 at 10:58
@zekia: Take a look at the new response. If it's working for you, please mark it as accepted. — jeradg, Mar 11 '15 at 11:03

CSS box-shadow VS overflow hidden

2 Answers2