Making the CSS replica of this Flash Action --Greyed out picture and flyout items on hover

Hi I would like to replicate this action with CSS/Javascript only. (I need it to work on ipad/iphone)

I have searched around, but all I can find is flyout menus, and no reference to dimming the pictures. (mine will have 6 instead of 2 this one has).

开发者_StackOverflow社区http://www.lifefitness.com

Is there a way to do this with CSS and Javascript alone?

Thanks in advance for you answers.

Look at jQuery animate() for the motion effects. The visual effect on the images is accomplished by swapping the images for a blurred version.

I agree with Diodeus

Make two images, one normal and one blurred. Use jquery.animate() to swap opacity between them and trigger them with js that check the position of your "slider button" when you drag it in one or other direction.

And do not forget to preload the images, so the effect will run smoothly. In flash it is easier because you have a "blur" effect, while in CSS you do not.