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