SlipHover
SlipHover apply direction aware hover animation for the caption of an image.
Index
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.
Compatibility
- Requirs jQuery 1.7+
- Works well with all modern browsers and IE9+.
License
Licensed under the MIT License