PLUGIN NAME
jquery.MyFadeOverImage.js
DESCRIPTION
This plugin create a fading effect for image on mouse over. In addition, you can select a color tone filter for your images. The tone is set for the images, when they are not hovered. When it is hovered, the color tong filter will be removed, so that there is a clear distinction between this selected image and other non-selected images. You do not need to prepare multiple sets of images, also you can change the color tone using javascript.
For example, you may want to display some old images, then you can use a yellow tone. In this case, the thumbnail or preview may look like old images.
DEMO
| COLOR TONE | IMAGE PREVIEW |
|---|---|
Default (black)
$("#demo1 img").MyFadeOverImage({
normalAlpha:0.9,
hoverAlpha: 1,
normalToneColor:"#000"
});
|
|
Smog
$("#demo2 img").MyFadeOverImage({
normalAlpha:0.5,
hoverAlpha: 1,
normalToneColor:"#fff"
});
|
|
Orange
$("#demo3 img").MyFadeOverImage({
normalAlpha:0.5,
hoverAlpha: 1,
normalToneColor:"#FFCEA0"
});
|
|
Tea
$("#demo4 img").MyFadeOverImage({
normalAlpha:0.5,
hoverAlpha: 1,
normalToneColor:"#FF723F"
});
|
|
FEATURES
- Fade over effect
- Color tone filter effect
- Customize the color tone and fading transition
- No need to prepare multiple sets of images
- Cross browser (work in IE / FF / chrome / Safari / opera)
DOWNLOAD
jquery.MyFadeOverImage.js, MyFadeOverImage.css
LICENSE
MIT license