# SlipHover

You'll love it when you need to display an image gallery.

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

## Download

download zip from GitHub

## 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. Also you can write html for the caption `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. 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
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 |

## 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 .

- using with wookmark
- using with freewall

## Compatibility

Requirs jQuery 1.7+.

Works well with all modern browsers and IE9+.

## License

Licensed under the MIT License

## Misc

Bug reporting, suggestion and feature request, please open issues on the project page. Pull request are welcome!

About me

I'm a frontend engineer from China and love doing cool stuff with the web.

- Wayou liuwayong@gmail.com

## Changelog

v2.0.1

release: 24 Jun 2014

- support border-radius

v2.0.0

release: 15 Jun 2014

- refactor the implementation
- fix window resize issue
- support for lazy loading imges
- fix the position not correct issue of the overlay
- add text vertical align option and horizon align option
- removed 3d perspective support in this version
- removed the auto scroll option

v1.1.7

release: 19 Apr 2014

- fix publish error

v1.1.6

release: 19 Apr 2014

- fix plugin url

v1.1.5

release: 18 Apr 2014

- fix the jquery data api error

v1.1.4

release: 12 Mar 2014

- border radius support
- change the size of the overlay to have the same border radius of the target(most often the target is the images)
- clear code and correct spelling

v1.1.2

release: 3 Mar 2014

- fix bug: when images got border the position of the overlay is not correct
- fix bug: when position of parents are not static the position of the overlays are not correct
- add lecense
- introduce new demo pages

v1.1.1

release: 12 Feb 2014

- fix issue #1
- upgrade plugin info
- upgrade demos

v1.1.0

release: 9 Jan 2014

- implement the 3d flip animation
- fixed some bugs
- upgrade demos and the documentation

v1.0.2

release: 5 Jan 2014

- upgrade jquery plugin info
- fixed bugs

v1.0.1

release: 5 Jan 2014

- upgrade demo page

v1.0.0

release: 4 Jan 2014

- main features are completed and known issues are fixed
- add a jquery plugin json file to publish this plugin to the jquery plugin center