Adding a fading gradient over image in slide

[aoknkrkx]

I'm trying to add a fading gradient over an image in a slideshow, so that, when viewing a certain picture (my slide shows 3 pics, one middle & then a small portion of the first & prev pic), the pictures on the sides will have this gradient over them, so the previous pic on the left will have it's left side fading out, and vice versa. If you get me? Similar to what was commented here: http://stackoverflow.com/questions/11991624/how-do-you-apply-a-fading-overlay-to-an-image-in-cssHTML \[code\]<div class="hero"> <div class="hero-carousel"> <article> <img src="http://stackoverflow.com/questions/13779168/images/deadmau5/slide1.jpg" /> </article> <article> <img src="http://stackoverflow.com/questions/13779168/images/deadmau5/slide2.jpg" /> </article> <article> <img src="http://stackoverflow.com/questions/13779168/images/deadmau5/slide3.jpg" /> </article> <article> <img src="http://stackoverflow.com/questions/13779168/images/deadmau5/slide4.jpg" /> </article> </div></div>\[/code\]javascript\[code\]<script> $(document).ready(function(){ $('.hero-carousel').heroCarousel({ easing: 'easeOutExpo', css3pieFix: true }); });</script>\[/code\]CSS\[code\].hero { width: 1366px; height: 340px; position:absolute;top:270px; overflow: hidden; margin-bottom: 48px; margin: 0 auto; border-top:9px solid rgba(51, 51, 51, .15); border-bottom: 9px solid rgba(51, 51, 51, .15); padding: 0 0 12px 0;}.hero-carousel article { width: 970px; margin: 0 auto; height: 470px; display: block; float: left; position: relative;}.hero-carousel-container article { float: left;}.hero-carousel article img{ border-style:solid;border-width:6px;color:#000; position: absolute; top: 0; left: 0; z-index: 1;}.hero-carousel article .contents { position: relative; z-index: 2; top: 72px; left: 48px; list-style: none; color: #000; width: 556px; padding: 20px; background: rgba(255,255,255,0.8); -pie-background: rgba(255,255,255,0.8); -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; behavior: url(/assets/PIE.htc);}.hero-carousel-nav { width: 980px; position: absolute; bottom: 0; left: 50%; margin-left: -490px; z-index: 2;}.hero-carousel-nav li { position: absolute; bottom: 48px; right: 48px; list-style: none;}.hero-carousel-nav li.prev { left: -50px; right: auto; bottom: 100px;}.hero-carousel-nav li.next { right: -30px; left: auto; bottom: 100px;}.hero-carousel-nav li a { background: none repeat scroll 0 0 #D21034; color: #FFFFFF; display: block; float: left;}.hero-carousel-nav li.next a { background: url('../images/deadmau5/large-arrow-right.png'), -5px -7px no-repeat; display: inline-block; width: 105px; /*width of your img*/ height: 105px; /*height of your img*/ font-size: 0px; right: -15px; /*this is better than 1px*/ bottom: 100px; overflow:hidden; outline:none;}.hero-carousel-nav li.prev a { background: url('../images/deadmau5/large-arrow-left.png'), -7px -7px no-repeat; display: inline-block; width: 105px; /*width of your img*/ height: 105px; /*height of your img*/ font-size: 0px; /*this is better than 1px*/ left: -50px; bottom: 100px; overflow:hidden; outline:none;}\[/code\]