Overview
Picanim is jQuery plugin used to bring stylish image hover effects,it contains more than 27+ unique hover effects and more comming soon.Browser Support:IE(even ie6),Firefox,Opera,Safari,Google Chrome.
Features
- 27+ unique hover effects
- include: such as grayscale blur transparent fadeIn slice fold boxRandom boxRandom boxDiagional...
- small size,just 3kb after gziped
- cross browser
- you can easliy config the effect with a lot of options
- also support the img tag with a specific width or height
- easy to use
- can show tooltip on image
- with mouseout reverse effect
Demo
grayscale ↔ fadeIn
blur ↔ fadeIn
transparent ↔ fadeIn
grayscale ↔ sliceUpLeft
blur ↔ sliceUpRight
transparent ↔ sliceDownLeft
grayscal ↔ foldLeft
blur ↔ foldRight
transparent(bgColor:#fffffff) ↔ boxRandom
blur ↔ boxDiagional
custom: show tool tip,slices:12,bgColor:#555555,ainmSpeed:500
... you can find more effects in the pack
Picanim options
- initEf : The init effect of the image. Default:transparent
- hoverEf : The effect when the image on mouse over. Default:fadeIn
- animSpeed : Animation speed for the effect. Default:600
- bgColor : The overlay color when initEf is trasnparent. Default:#000000
- transOpacity : The overlay opacity value. Default:0.5
- slices : Number of slices for slice animations. Default:8
- boxCols : Number of boxes in a row for box animations. Default:6
- boxRows : Number of rows for box animations. Default:4
- tooltip : Whether to show tooltip on mouse over(tooltip text can be set with the img's 'alt' attribute). Default:false
initEf
- transparent
- grayscale
- blur
hoverEf
- fadeIn
- sliceDownLeft
- sliceDownRight
- sliceUpLeft
- sliceUpRight
- foldLeft
- foldRight
- boxRandom
- boxDiagional