15 Excellent thumbnail gallery effects
![]()
Used to showcase work or for products, nowdays the photo galleries are an important part of a website.
These excellent plugins that are listed bellow, can help you create high quality, professional thumbnail galleries.
A solution which relies on css sprites and a few lines of jQuery, but requires a bit of preparation before it can be implemented. It is not recommended for large scale projects and probably best for displaying portfolio pieces.

This effect is just a demo of the possibilities. One can use the same technique to show the Title of the Image or RunTime and Title of Video Thumbnail.

To get this effect (image splitting in middle), two instances of the same image were used. One instance goes toward left while second image goes right, in effect giving an illusion that image is splitting in middle.

The hover zoom effect basically reverse zooms an image while fading in a label on top of it when the mouse hovers over it. It makes for a pretty slick effect which could be used on thumbnails.

The imageZoom jQuery plug-in makes it easy to show off your images in an easy and attractive manner.

Learn how to build thumbnail gallery with zooming effect and fadein and fadeout caption. This tutorial will walk you through the concept behind it and how to code it.

Learn how to use JQuery animations to slide captions and images in and out of view.

This is a simple technique to animate an image when hovering using jQuery’s animate() effect. We will use this effect to manipulate our CSS, creating a seamless transition between two areas of an image.

Learn how to make an image splitting effect. It’s simillar to a sliding door effect, the effect looks like the image is splitted into half and one goes left and the other one goes right.

Animate an image while hovering it and show the visitors information while doing that. Sounds simple huh? Well it is, but the effect is nice and can be nice for a portfolio, for example.

Learn how to make a stunning four corners sliding effect easily with jQuery. It’s elegant, unique and really cool solution for thumbnail gallery.

Learn how to make a fade in – fade out effect. The effect fades an element to 30% on arrival of the website, then when you hover over it, it fades to 100%.

Learn how to make a black and white image fade into a color image.

Learn how to make a cool and easy spotlight effect with jQuery.

Learn how to make an effect that gives the feeling the image is sliding like a garage door and not simply moving. Once the animation finishes, the text element fades in.









User Comments
code888
On December 22, 2009 at 5:47 am
Some fantastic effects there.
Thanks for sharing!
cyber
On December 24, 2009 at 6:02 am
thanks net kit.. you save my much time… it’s really helpful
arkenavan
On December 26, 2009 at 6:07 pm
I want to quote your post in my blog. It can?
And you et an account on Twitter?
admin
On December 27, 2009 at 5:07 am
Arkenavan, as long as you keep a link pointing to the original post on my blog, I have no problem with that.
rocky
On January 4, 2010 at 3:36 am
Nice collection..Thanx for informing me on my blog..
forex robot
On January 21, 2010 at 6:59 am
What a great resource!
Slobodan Kustrimovic
On January 24, 2010 at 10:11 am
Thanks for including 9 and 14
Another similar to the Spotlight effect is going live tomorrow.
btw arkenavan from the comments is a spam bot
Post Comment