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>
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.
|
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.
|
view |
target |
Specify witch element the animation will aplly on.
|
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.
|
view |
duration |
The duration of the animation.
|
view |
fontColor |
The color of the text in the overlay.
|
view |
backgroundColor |
The color of the overlay.
|
view |
reverse |
Reverse the animation.
|
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.
|
view |
scrollSpeed |
How fast the overlay text will scroll animated when the overlay text is overflow and the 'autoScroll' is true.
|
view |
This plugin works fine on all morder browsers and IE9+.
The plugin js file along with a minified version and all examples are included in the download files. You can run them locally.
Download ZIP Download TAR