Quick Start

Include jQuery and the plugin file to your page

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.sliphover.min.js"></script>

Simply call the plugin on the container witch contains images.

<div id="container">
    <img src="1.jpg" title="title1" />
    <img src="2.jpg" title="title2" />
    ...
</div>

<script type="text/javascript">
    $("#container").sliphover();
</script>

Options

To custom the layout of the overlay and control the behavior, you can specify certain options.

$("#container").sliphover({
    option: value,
    option2: value2,
    ...
});

All avalaible options are listed below and there are demos to illustrate.

Option	Description	Example
height	The height of the overlay. Default: '100%' Options: percentage value string only. '50%' , '30%', etc.	view
flip	True to enable the 3D flip animation instead of slid in animation of the overlay when hover on. For IE only works on IE 10+. And when use 3D animation, make sure the value of the 'height' option is '100%'(witch is the default value), for there's an known issue that when hover up the overlay is still visible after the animation. Default: false Options: true false	view
target	Specify witch element the animation will aplly on. Default: 'img' Options: any element you want. 'div', '.class_name',etc. If using class name the dot before the class name is needed: '.class_name'.	view
title	The content that will be displayed in the overlay when hover. To show text you need to specify the title attribute of the target element, you can also place html value within the title attribute and it will show properly. To style the text, you can write you own css rules when assign the content of the 'title' attribute. Default: 'title' Options: 'title', 'alt', 'your-custom-hmtl5-data-attribute'	view
duration	The duration of the animation. Default: 'fast' Options: 'fast', 'slow', or a nunmber (milliseconds)	view
fontColor	The color of the text in the overlay. Default: '#fff' Options: any valid CSS color syntax. '#9c9c9c' , 'rgb(255,0,0)', 'red', etc.	view
backgroundColor	The color of the overlay. Default: 'rgba(0,0,0,.5)' Options: any valid CSS color syntax. '#9c9c9c' , 'rgb(255,0,0)', 'red', etc. If you wanna the overlay be transparent then use rgba color type to specify the opacity: 'rgba(0,255,0,0.3)' here the 0.3 is the opacity.	view
reverse	Reverse the animation. Default: false Options: false, true.	view
autoScroll	If true, when the text of the overlay is too long and overflowed, it will auto scrolling up and down when hover oh it. Default: true Options: true, false. If set to false, there will be a vertical scroll bar.	view
scrollSpeed	How fast the overlay text will scroll animated when the overlay text is overflow and the 'autoScroll' is true. Default: 40 Options: plain number. the samller the faster.	view

Quick Start

Options

Browser Compatibility

Download

About