Submit your widget
98
Yays

Animated Header in jQuery

Views 16432   downloads 2304   Image Effects

We'll show you how to animate your header’s background image using jQuery to give your website that little extra something.We are going to build a header that animates it’s background. …

97
Yays

Simplest jQuery Spotlight Effect

Views 10096   downloads 1541   Image Effects

This is a Simplest jQuery Spotlight Effect 1. HTML We will use divs instead of ul list here. I have tested it with UL before, and it will work perfectly fine, you just have to style is with CSS. The caption…

138
Yays

Useful and Practical jQuery Image ToolTips

Views 43990   downloads 13674   Image Effects

It displays a tooltip image when user hover on the thumbnail with fadein and out effect. it's a useful script for your website. 1. HTML I have been thinking of using UL list, but then I think it's not…

114
Yays

Image Highlighting and Preview with jQuery

Views 10141   downloads 1749   Lightbox & Dialog & Overlay

We will highlight images on a delayed hover and offer a preview mode which will enlarge and center the bigger version of the image on the screen. The Markup   For the HTML structure we simply need…

122
Yays

Interactive Photo Desk with jQuery and CSS3

Views 10598   downloads 1980   Image Effects

In this little experiment we created an interactive photo desk that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that can…

136
Yays

Beautiful image Filterable Portfolio with jQuery

Views 21690   downloads 3257   Layout & Interface

  If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break…

143
Yays

Stunning Sliding Door Effect with jQuery

Views 14775   downloads 3376   Image Effects

Basically, this is what it does: Grab all the div with qitem class, find the image and replace it with four DIVs (four corners) Each of the corner will have the same background image (grabbed from qitem…

124
Yays

Image Preview Gallery

Views 19485   downloads 3831   Image Effects

Here we have a bunch of thumbnails. When each thumbnail is rolled over, script will load an image that we have linked in HREF attribute of an A tag. That makes this method accessible as well, because…

96
Yays

Thumbnail Gallery with Slick Heading and Caption Effect with jQuery

Views 12149   downloads 2012   Image Effects

This is a simple jQuery , but can be extremely useful in frontend design Similar examples 1. HTML It's simple, inside the container - photo class you have three objects, first div is the heading, image…

108
Yays

Zoom-Info – Create An Informative Image Gallery With jQuery & CSS

Views 15872   downloads 3167   Image Effects

Question: Have you ever wanted to neatly display a few lines of text about an image in your site but didn’t want to compromise on the design of your overall layout?we'll going to show you how to…

151
Yays

Interactive Picture with jQuery(Image Tips)

Views 20809   downloads 4112   Tooltips

In this tutorial I will be showing you how to piece together an interactive picture – aka an image that contains tooltips and popup boxes. This can be useful for showing off a particular aspect…

490
Yays

Reorder and filter items with a nice shuffling animation(Quicksand)

Views 45705   downloads 4611   Image Effects

How it works At the very basic level, Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items. You can do it in a couple of ways: Use plain HTML,…

260
Yays

Images Or Banner Rotator With jQuery

Views 29829   downloads 3210   Image Effects

How To Use It? Step 1 – XHTML The XHTML code of the banners is generated on the fly by PHP after a database query, and outputted to the page. Here is how the markup for a sample banner looks like:…

105
Yays

Fancy Hover Effect with jQuery

Views 20302   downloads 2704   Image Effects

Very cool hover effect HTML   <div id="featured-wrap"> <div id="featured-content"> <a href="http://www.jardinesdelte.com/"><img alt="Jardines" src="2_s.jpg" /></a> <a…