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.

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!

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