Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I've been scouring the web for a slider that offers a particular effect, but I can't find one. I'm hoping that someone here will be able to help out...

Specifically, I need a slider that will slide left and right through a series of HTML DIVs. However, I also need the old slide to fade out as it slides.

This is because I don't what to have a visible frame around the the slider, so I don't want the old slide to be cropped against an invisible edge.

It's hard to explain in words, so here's a graphic. In each case the green slide is entering the view, the red one is existing.

enter image description here

Is possible, I'd like the slide to use CSS3 transitions where available for the smoothest possible effect.

Has only ever come across such a beast?

share|improve this question

closed as off topic by Simon Hayter, danlefree Mar 22 '13 at 5:03

Questions on Webmasters Stack Exchange are expected to relate to webmastering within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

Why can't you just overlay two images with transparency gradients on either side of the slider? I'm not sure how a CSS3 transition would help, since CSS3 transitions are time-based style changes. You can use it to fade an image over time, but not over distance. – Lèse majesté Feb 10 '12 at 10:40
Hi. Good idea, but I need the images to face into the page's background image... – tarmes Feb 10 '12 at 11:05
If your BG is a solid color, it shouldn't be a problem. But if your BG is a pattern or type of image, then it might be trickier to have it line up correctly in all browser, but it's still doable. Just test on all browsers to make sure it's positioned right. – Lèse majesté Feb 10 '12 at 11:15

I believe NivoSlider can be configured to do what you ask.

This article from TripWire and this one from hongkiat may be useful to you.

share|improve this answer

I just found this page which talks about the alpha mask feature that Webkit supports. It's a custom vendor extension, so it's only supported by Webkit browsers (Chrome, Safari, etc.). However, IE also has a custom extension AlphaMask that does the same thing. And apparently you can do similar via SVG on Firefox.

It's not pretty, as it harkens back to the days of the browser wars between NN and IE when standards were basically chucked out the window and everyone just coded their own proprietary features, but it is possible to do what you're asking using CSS and a little help from SVG. I would do some testing on mobile browsers just to be safe though.

share|improve this answer

Your first option (you've labelled them both 'option 2' but I can see what you meant) looks easier. Just alter the opacity of the divs.

Here's some HTML had a div with 50% opacity.

Included is a button which changes the opacity


  <title>Fading Fun</title>

<body bgcolor="blue">


    <div id="div_1" style="opacity:0.5;filter:alpha(opacity=50);">
      Purple <img src="red.png" >


 <input type="button" value="click me!" onclick="document.getElementById('div_1').style.opacity='1'">

share|improve this answer
I'll leave the scrolling up to you, but you get the idea. – Adjam Feb 10 '12 at 13:57

Look into the JQuery Anything Slider (or maybe it's 'AnythingSlider'). You can download on Github. I found it through looking into the repository of CSS-Tricks and they have blogged about it so there's quite a few options/examples/themes and it's well documented. I think it might provide what you are looking for.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.