SlipHover

SlipHover apply direction aware hover animation for the caption of an image.

Index

• Quick start
• Options
• Demo
• Compatibility
• License

Quick start

include the files

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.sliphover.min.js"></script>

call the the plugin on a container as your wish

$("#container").sliphover();

All done!

Options

you can custom the caption by passing options when call the plugin, all available options are listed below.

call the the plugin on a container wish you wish

$("#container").sliphover({
    option: value,
    option2: value2,
    ...
});

| Option | type | default | Description | Example | |-----------------|---------------|------------------|--------------------------------------------------|------------- | | height | string | 100% | The height of the overlay. e.g.200px,50% | view | | target | string | 'img' | Specify witch element the overlay will aplly on. Any valid CSS selector will do.| view | | caption | string | 'title' | Witch attribute will be the content of the overlay. You can use custom HTML5 data attribute. e.g. data-caption | view | | duration | number/string | 'fast' | How long will the animation will be in millisecond, fast equals to 200 and slow equals to 600. You can give you own number. e.g.500 | view | | fontColor | string | '#fff' | The color of the text within the overlay | view | | backgroundColor | string | 'rgba(0,0,0,.5)' | The background color of the overlay. Any valid CSS color value will do | view | | backgroundColorAttr | string | 'data-background' | Also you can specify individual color for each overlay via the data-background attribute like this data-background="rgba(120,100,240,0.85)" | view | | reverse | bool | false | Whether the animation direction is reversed | view | | textAlign | string | 'center' | The horizon align of the caption | view | | verticalMiddle | bool | true | The vertical align of the caption | view | | withLink | bool | true | if image is wraped with a link the overlay will be clickable, set false to disable click | view |

Demo

Besides examples in the option table above, there are a few nice demos shows sliphover can work well with other image gallery plugins such as Wookmark, freewall and isotope.

• working with wookmark
• working with freewall

Compatibility

• Requirs jQuery 1.7+
• Works well with all morder browsers and IE9+.

License

Licensed under the MIT License