SlipHover v2.0.1

You'll love it when you need to display an image gallery.

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


download zip from GitHub

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


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

    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
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


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 .


Requirs jQuery 1.7+.

Works well with all morder browsers and IE9+.


Licensed under the MIT License


Bug reporting, suggestion and feature request, please open issues on the project page. Pull request are welcome!

About me

I'm a frontend engineer from China and love doing cool stuff with the web.



release: 24 Jun 2014

  • support border-radius


release: 15 Jun 2014

  • refactor the implementation
  • fix window resize issue
  • support for lazy loading imges
  • fix the position not correct issue of the overlay
  • add text vertical align option and horizon align option
  • removed 3d perspective support in this version
  • removed the auto scroll option


release: 19 Apr 2014

  • fix publish error


release: 19 Apr 2014

  • fix plugin url


release: 18 Apr 2014

  • fix the jquery data api error


release: 12 Mar 2014

  • border radius support
  • change the size of the overlay to have the same border radius of the target(most often the target is the images)
  • clear code and correct spelling


release: 3 Mar 2014

  • fix bug: when images got border the position of the overlay is not correct
  • fix bug: when position of parents are not static the position of the overlays are not correct
  • add lecense
  • introduce new demo pages


release: 12 Feb 2014

  • fix issue #1
  • upgrade plugin info
  • upgrade demos


release: 9 Jan 2014

  • implement the 3d flip animation
  • fixed some bugs
  • upgrade demos and the documentation


release: 5 Jan 2014

  • upgrade jquery plugin info
  • fixed bugs


release: 5 Jan 2014

  • upgrade demo page


release: 4 Jan 2014

  • main features are completed and known issues are fixed
  • add a jquery plugin json file to publish this plugin to the jquery plugin center