in the above jsfiddle you can see my shadow is not good, I edited a comment in the css where you can uncomment out and see what it suppose to look like with content: url(). I currently have 2 dilemmas, first I can use content: url() to get the correct look, but then the black image gets covered. Or I can use background: url() and the black placeholder image doesn't get covered up but my transparent shadow thingy will look like crap. so if I can fix one of the problem i'm good to go.
Here is the code:
<div class="list_carousel">
<ul id="foo2">
<li>
<a href="#"><img src="http://dummyimage.com/158x228/000/fff.png"></a>
</li>
</ul>
<div class="clearfix"></div> <a id="prev2" class="prev" href="#"><img src="image/images/carousel_control_03.png"/></a>
<a id="next2" class="next" href="#"><img src="image/images/carousel_control_05.png"></a>
<div id="pager2" class="pager"></div>
</div>
Here is the css:
.list_carousel {
background-color: #fff;
margin: 0 76px 30px 76px;
width: 808px;
}
.list_carousel ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
.list_carousel li {
font-size: 40px;
color: #999;
text-align: center;
background-color: #fff;
border: 5px solid #fff;
width: 180px;
height: 250px;
padding: 0;
margin: 6px;
display: block;
float: left;
background: url(http://i.imgur.com/jahcmyA.png) no-repeat 50% 100%;
/* content: url(http://i.imgur.com/jahcmyA.png) */
}