Illustration for Image Zoom Effect on Mouse Hover

Image Zoom Effect on Mouse Hover

Image zoom effect on hover - Original by Maomihz , Modified by Lan Tian Last night Maomihz asked me to modify a jQuery script to achieve an automatic HD image display effect when hovering over thumbnails. There were two initial bugs: the enlarged image would flicker when hovering over the frame, and the image would exceed the top edge of the screen. My solution was to place the enlarged image under the thumbnail and set a semi-transparent effect for the thumbnail. The top-edge overflow issue was easily resolved by implementing a max() function. Here's the jQuery code: $ ( function () { var x = 22 var y = 540 var a = 0 $ ( 'a.smallimage' ). hover ( function ( e ) { if ( a == 0 ) { $ ( 'body' ). append ( '<div id="bigimage"><img src="' + this . rel + '" alt="" /></div>' )...