Friday, May 1, 2009

Create Fancy Thumbnail Hover Effect with jQuery

Soh Tanaka has written a tutorial about making a Fancy Thumbnail Hover Effect with jQuery. Basically all they are doing is animating the thumbnail’s size, absolute positioning coordinates (vertical alignment with css), and padding when we hover over. During this animation, they also switch the value of the z-index, so that the selected image stays on top of the rest.



It may not be as smooth as the flash version, but its definitely a neat effect. If you switch up the absolute potion coordinates, you can create various ways the hover effect pops out as well.


Image Hover Effect with jQuery



Requirements: jQuery Framework

Demo: http://www.sohtanaka.com/web-design/examples/image-zoom/

License: License Free







If you enjoyed this post, make sure you subscribe to my regular Email Updates!

0 comments:

Post a Comment

Followers

Action

Mesothelioma Cancer
ThemeFlash Msn bot last visit powered by MyPagerank.Net Creative Commons License
 

ThemeFlash : The Quality Web Resources. Copyright 2009-2010 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol