CSS Scan and Magnify an Image
15th October 2012
IE9+, Firefox, Safari, Chrome and Opera
Hover for larger image
Hover for larger image
copyright © stu nicholls - CSS play
Information
You no doubt have seen jQuery/javascript versions of this demo on sites selling womens clothing, well this is a pure CSS version.
So just hover the small image to reveal a 2.5x enlargement of the section shown with an opaque overlay. Move the mouse vertically to scan the image and display the enlarged section.
The animation is visible in Firefox, Chrome, Safari and Opera. IE9 will see a slightly jerky movement, but hopefully IE10 will see the animation.
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.
