CSSPLAY

CSS DEMOS › Before and After Image Slider

Date : 10th October 2012

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

Information

A slider to show 'before' and 'after' images by sliding a pointer left and right

Just hover the mouse over the left/right pointer circle and move it right and left to reveal/hide the 'after' image.

Moving the mouse vertically off the left/right slider will stop the transition at its current position which will be held until you move the mouse back onto the left/right slider.

Working in Firefox, Safari, Chrome and Opera. In IE9 you will see a jerky movement with no 'hold' position. IE10 should work correctly.

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.