devmaheremad / SlipHover

apply direction aware animation to images caption

SlipHover

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

Index

• Quick start
• Options
• Demo
• Compatibility
• License

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.

• working with wookmark
• working with freewall

Compatibility

• Requirs jQuery 1.7+
• Works well with all modern browsers and IE9+.

License

Licensed under the MIT License