SlipHover

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

Compatibility

Requirs jQuery 1.7+.

Works well with all modern browsers and IE9+.

License

Licensed under the MIT License