Sliding Boxes and Captions with jQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through. From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect.
jQuery image slide on hover effect
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. Have a look at the demo below for a better understanding.
Longer Captions for jQuery’s FancyBox Plugin
jQuery’s FancyBox Plugin has been a huge hit and is now being used in a lots of websites. But still there is something that is missing in it. That something is the “Longer Captions”. FancyBox allows only short captions, in short it could turn out to be a bad option for the ones who need to provide longer and bigger captions.
Over here you will get an improvised version of the jQuery’s FancyBox
This version of FancyBox has been modified to handle captions in a more interactive way. It also doesn’t break on excessively large captions. This example is based on FancyBox 1.2.1.
jQuery’s Star Rating Widget
What is this?
What it does?
* It turns a collection of radio boxes / select options into a neat star-rating control.
* It gives you the full access to each instance of “stars” created on the page, with an easy to use syntax provided by the jQuery UI core library.
LavaLamp for jQuery Users
As User Interface developers, we know that one of the first widgets our visitors use is a “Menu”. Capturing their attention right there is something that we always strive for, and I guess LavaLamp is a step in that direction.
Hover zoom Effect with jQuery and CSS
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. You can check out a demo or grab the source right here if you don’t want to read the entire tutorial.
Greyscale Hover Effect with CSS & jQuery
This effects would help you in making your portfolio or making portfolio websites. In this effect, with the help of CSS and jQuery, a greyscale effect comes into being on Hover
jQuery Image Zoom Plugin
The imageZoom jQuery plug-in makes it easy to show off your images in an easy and attractive manner for portfolios.