Adipoli is a jQuery plugin that beautifies and simplifies creating and consuming such 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.
You can see a Demo of Adipoli Plugin here
Available Effects of Adipoli:
- startEffect : Default style of image
- hoverEffect : Image style on mouse over
- imageOpacity : opacity of image considered when start effect is transparent or overlay
- animSpeed : Animation speed for the effect
- fillColor : Overlay color
- textColor : Text Color
- overlayText : Default HTML to be displayed on overlay
- slices : Number of slices for slice animations
- boxCols : Number of boxes in a row for box animations
- boxRows : Number of rows for box animations
- popOutMargin : Margin of Image popout
- popOutShadow : Shadow length of popout image. Shadow works for those browsers which support text-shadow css.
Start Effects:
- transparent
- normal
- overlay
- grayscale
Hover Effects:
- normal
- popout
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpRandom
- sliceUpDown
- sliceUpDownLeft
- fold
- foldLeft
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse
Related articles
- All About jQuery: Fresh and Useful jQuery Plugins and Tutorials (noupe.com)
- jQuery and CSS Menus with Animations (itswadesh.wordpress.com)
- 24 Best jQuery Media Plugins to Use in 2012templates.com jQuery… (cssmania.com)
- How to use a jQuery function on mutliple images (stackoverflow.com)
- Creating Awesome Effects Using jQuery Hover (websanova.com)
- jQuery button animation sequence (stackoverflow.com)
