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

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

$("#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
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

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 .

Compatibility

Requirs jQuery 1.7+.

Works well with all morder browsers and IE9+.

License

Licensed under the MIT License

Misc

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.

Changelog

v2.0.1

release: 24 Jun 2014

  • support border-radius

v2.0.0

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

v1.1.7

release: 19 Apr 2014

  • fix publish error

v1.1.6

release: 19 Apr 2014

  • fix plugin url

v1.1.5

release: 18 Apr 2014

  • fix the jquery data api error

v1.1.4

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

v1.1.2

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

v1.1.1

release: 12 Feb 2014

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

v1.1.0

release: 9 Jan 2014

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

v1.0.2

release: 5 Jan 2014

  • upgrade jquery plugin info
  • fixed bugs

v1.0.1

release: 5 Jan 2014

  • upgrade demo page

v1.0.0

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