adding box shadow to images in bx-slider - html

Question

I am trying to customize bxslider, a popular js carousel plugin, below is what I want to make it look like :
Well the thing I want to add is the drop shadow and the caption below the bottom for each image. as of now I have edited the css a bit to remove the default bxslider style like the borders and stuff.
FIDDLE HERE (this is what I could achieve so far. )
Now of course if all you want to do is add a box shadow to an image, you can do it easily, like so ::
<ul class="bxslider fade out">
<li><img src="img/bp-1.jpg" /></li>
</ul>
CSS ::
.bxslider {
margin: 0;
padding: 0;
}
.bxslider li {
position: relative;
display: table;
}
.bxslider li:after {
content: '';
height: 5px;
width: 90%;
position: absolute;
bottom:5px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-box-shadow: 0px 2px 15px rgba(0,0,0,.7);
box-shadow: 0px 2px 15px rgba(0,0,0,.7);
z-index: -1;
background: rgba(0,0,0,.2);
}
.bxslider li img {
width: 100%;
max-width: 300px;
}
P.S. I need to use pseudo elements because the box-shadow cannot be 100% of the img's width.
But adding a box-shadow to an image in bx-slider is a challenge , here's why ::
bx-slider adds a class called bx-viewport which has the following css overflow: hidden;, and so the box-shadow is never seen. If you remove the overflow:hidden , you will see the shadow , but the carousel will not function properly, the hidden slides will show up and you page will get a horizontal scrollbar (not what I want) .
OK so I have given you the backdrop, my problem is pretty simple , I just want to add a box-shadow to the images in the slide you can use this FIDDLE to experiment .
So how do I go about doing this?

Answer 1

You can check my approach on JSFiddle.
I have added title inside by using H3.
<li>
<div class="img-wrapper">
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
</div>
<h3>X1 UNFOLDED</h3>
</li>

Answer 2

Just wrap your images and apply box-shadow to that wrapper. Also add additional padding to .bxslider > li. JsFiddle Link
HTML:
<ul class="bxslider">
<li>
<div class="img-wrapper">
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
</div>
</li>
</ul>
CSS:
.bxslider > li {
padding-bottom: 20px;
}
.img-wrapper:after {
content:'';
height: 5px;
width: 90%;
position: absolute;
bottom:5px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-box-shadow: 0px 2px 15px rgba(0, 0, 0, .7);
box-shadow: 0px 2px 15px rgba(0, 0, 0, .7);
z-index: -1;
background: rgba(0, 0, 0, .2);
}
Also in this wrapper you could add caption for image. bx-slider just create slides from child elements of .bxslider.

Answer 3

Another thing you could do is adding height to .bx-viewport container, forcing it with CSS or javascript. Maybe it's not the best solution but it will do the trick.

Answer 4

This is how I added a box-shadow to my carousel images:
http://jsfiddle.net/Yq3RM/995/
.bx-viewport {
padding: 3px; /* add space for box-shadow of image to show */
}
.bxslider img {
box-shadow: 0 0 3px 0 #000;
}