MyFadeOverImage.js Mouse Hover Transformation
This plugin creates a gradient effect when hovering over images. Additionally, you can choose a tone filter for your images. By default, images are displayed with a selected tone when the mouse is not hovering over them. When the mouse hovers over an image, the color tone filter is removed, creating a clear distinction between the selected image and other unselected images. You do not need to prepare multiple sets of images, as JavaScript can also be used to change the tone.
For example, if you want to display some old photographs, you can apply a yellow tone. In this case, thumbnails or previews can have an aged appearance.
Default (Black)
1 2 3 4 5 | $("#demo1 img").MyFadeOverImage({ normalAlpha:0.9, hoverAlpha: 1, normalToneColor:"#000" }); |
Smoke
1 2 3 4 5 | $("#demo2 img").MyFadeOverImage({ normalAlpha:0.5, hoverAlpha: 1, normalToneColor:"#fff"}); |
Features
Multiple Fade Effects
Tone Filter Effect
Custom Tone and Fade Transitions
No Need to Prepare Multiple Sets of Images
Cross-Browser Compatible (IE/FF/Safari/Chrome)