Adding a fade gradient over an image in a slide

Question

I am trying to add a fading gradient above the image in the slide show, so that when viewing a certain image (my slide shows 3 photos, one middle, and then a small part of the first and previous pictures), the images on the sides will have this gradient above them, so the previous pic the left side will have the left side attenuation and vice versa. If you get me? Similar to what was commented here: How do you apply image overlay in CSS? I have 2 .png's that disappears on the left, one that disappears on the right, Where can I apply them in terms of HTML and .css ? You will see them at the very bottom of .css , however they are not applied correctly and do not have corresponding divs in html (necessary?). When you hover over the next and previous image, they should also weaken a bit (lose some of their effects). Example: http://www.deadmau5.com

HTML

 <div class="hero"> <div class="hero-carousel"> <article> <img src="images/deadmau5/slide1.jpg" /> </article> <article> <img src="images/deadmau5/slide2.jpg" /> </article> <article> <img src="images/deadmau5/slide3.jpg" /> </article> <article> <img src="images/deadmau5/slide4.jpg" /> </article> </div> </div> 

Javascript

 <script> $(document).ready(function(){ $('.hero-carousel').heroCarousel({ easing: 'easeOutExpo', css3pieFix: true }); }); </script> 

CSS

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

Answer 1

There are several ways to handle this, but this is a simplified example of how this site puts everything.

CSS

 #container { position: relative; width: 504px; margin: 0 auto; } #slide-container { width: auto; } .article { display: inline-block; } .article img { width: 165px; height: auto; } #overlay-left { position: absolute; width: 165px; height: 60px; top: 0; left: 0; background: url('http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-left.png') no-repeat top left; z-index: 2; } #overlay-right { position: absolute; width: 165px; height: 60px; top: 0; right: 0; background: url('http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-right.png') no-repeat top right; z-index: 2; } #overlay-left:hover, #overlay-right:hover { opacity: 0.8; }​ 

HTML

 <div id="container"> <div id="slide-container"> <div class="article"> <a href=""> <img src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" /> </a> </div> <div class="article"> <a href=""> <img src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" /> </a> </div> <div class="article"> <a href=""> <img src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" /> </a> </div> </div> <div id="overlay-left"></div> <div id="overlay-right"></div> </div> 

Here is the JSFiddle of this if you want to play with it.