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

Browser Compatibility


This plugin works fine on all morder browsers and IE9+.

Download


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

About