CSS play - Before and After Image Slider - NO javascript
10th October 2012
Firefox, Safari, Chrome and Opera [IE9 without animation and 'hold']
copyright © stu nicholls - CSS play
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
You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.
Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.
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.
