article:
Website: Template for Diving Club
article:
JS Plugin: noty

JS Plugin: Adipoli jQuery Image Hover Plugin

Advertisement

"Adipoli is a simple jQuery plugin used to bring stylish image hover effects."


Usage
Place the below references inside your head tag

<link href="css/adipoli.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery.adipoli.min.js" type="text/javascript"></script>


If you need image hover on an image with id 'image1', call adipoli plugin like this

<script>
      $('#image1').adipoli();
</script>


Options

$('#image1').adipoli({
    'startEffect' : 'normal',
    'hoverEffect' : 'popout'
});


Screenshots
transition effects - startEffect : grayscale, hoverEffect : normal(For HTML5 Browsers)

Plugin: Adipoli jQuery Image Hover Plugin


transition effects - startEffect : normal, hoverEffect : popout

Plugin: Adipoli jQuery Image Hover Plugin


transition effects - startEffect : overlay, hoverEffect : sliceDown

Plugin: Adipoli jQuery Image Hover Plugin


transition effects - startEffect : transparent, hoverEffect : boxRandom

Plugin: Adipoli jQuery Image Hover Plugin


transition effects - startEffect : overlay, hoverEffect : foldLeft

Plugin: Adipoli jQuery Image Hover Plugin


transition effects - startEffect : transparent, hoverEffect : boxRainGrowReverse

Plugin: Adipoli jQuery Image Hover Plugin



Available Options

- 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




source
demo
download

Advertisement
Tags: plugin, jquery, image, hover, develop, design, layout, web, website, internet

Leave a Comment

No Comment

© Creative3x Ltd.