jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover. It is basically identical to the image grid found on www.ted.com. Works like a charm in IE6+, FF 3+, Safari 3+ and Opera 10.
Best jQuery Image Hover Effect Plugins & Tutorials with Demo
Create jQuery Pinterest Pin It Plugin
This plugin looks for all images, and wrap it inside a container that come with a pinterest Pin it button. So, your visitor just have to hover above the image they want, and pin it straight away. It’s a simple plugin.
As you might have noticed, nowadays, pinterest Pin count button can be found in most design websites, they also released a bookmarklet that scan a webpage for images and allow you to pin it easily. However, sometimes you might find it’s not that convenience when the page contain more than 30 images. It takes a while to find the image. As a result, I created this plugin that allow you to pin the image straight away.
Magnifying glass for image zoom using jQuery and CSS3
Learn to make a realistic magnifying glass using Jquery and CSS3. Hover above the image to see the action.
The code uses CSS3 box-shadow and border-radius properties to create the magnifying glass. Jquery is used to position it at the cursor coordinates and change the background position accordingly.
Moving the cursor away from the image gently fades out the magnifying glass bringing the image back to the default state.
3D Thumbnail Hover Effects with CSS3 and jQuery
Today we want to show you how to create some exciting 3D hover effects using CSS3 and jQuery. This idea is inspired by the cool hover effect that you can find on the page of the Google SketchUp Showcase.
In our examples, we’ll use thumbails that will reveal some more information on hover. We will create a structure with jQuery that will allow making the image appear as folded or bended when we hover over it. For the hover effects we will use CSS 3D transforms.
Direction-Aware Hover Effect with CSS3 and jQuery with Demo
In today’s tip we’ll show you how to create a direction-aware hover effect using some CSS3 goodness and jQuery. The idea is to have a little overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse. When we “leave” the element, the overlay will slide out to that direction, following our mouse. This will create an interesting-looking effect.
iPicture : A jQuery Plugin For Tooltip your Images With Demo
iPicture, a jQuery plugin, is perfect for such cases and allows us to place tooltips over any desired location of images.
Once the user hovers/clicks the pointers, the tooltip is displayed with its pre-defined content.There are several options for customizing the functionality including the ability to use different pointer images for each tooltip or their animation types.
Also, iPicture has a handy initialize function that saves so much time by enabling a configuration wizard where we can place pointers + set their definitions with drag ‘n’ drops and the JSON output to be used in the code is created automatically.
Hoverizr : A responsive jQuery Image manipulation and overlay plugin
Hoverizr is a really small (2.5KB minified) responsive jQuery plugin that outputs manipulated images on top (or below) your targeted images. Currently, it features three effects: grayscale, blur and color inversion. Automatically when you move your mouse over the target elements, the element above fades out to reveal the element beneath whether it is the original image or the manipulated one.Hoverizr takes advantage of the <canvas> element to do all the image processing.
Adipoli : Attractive jQuery Image Hover effect plugin
Adipoli is a jQuery plugin that beautifies and simplifies creating and consuming such stylish hover effects.
With a simple function, we can choose the “start effect (normal, transparent or overlay)” and the images will become less catch until they are hovered.
There are 20+ built-in and attractive transition effects that will display the images “as is” when users hover them.
Also, multiple configuration options exists for further customizing the transitions.
jQuery Blend Modes plugin
jQuery Blend Modes plugin bring the blend Modes functions to your web page, without use any images editor (Like Photoshop), The main function of this plugin is to blend two copy of same image with a specified blend mode (it support 15 modes), and render the result into a canvas element.
We can use this plugin in many way, for example I create with this plugin (and small trick) a new mouse hover idea for the images.
The traditional image mouse hover was either reduce the image opacity, or the inverse, grow it, shrink it, or something like that.
But with jQuery Blend Modes plugin, I make the contents of an image change for really!!
