Inset Border Effect jQuery Plugin

by Robin Thrift

This plugin puts a border around the targeted elements (typically images), but unlike normal CSS borders it covers up part of the image. When the element is hovered over, the border animates to the sides, revealing the whole image. This effect is very often used on Flash websites. This plugin can be used in combination with almost any lightbox (tested with colorbox). Feel free to do whatever you like with this plugin. However if you redistribute (even when altered) you must give credit to me.

Usage

Simple:

$("img").insetBorder();

All options:

$("img").insetBorder({
  speed          : 1000,           // 1000 = 1 second, default 250
  borderColor    : "orangered",    // Default white (#ffffff)
  inset          : 10,             // Border width, default 10px
  borderType     : "solid",        // Border type, e.g. dashed
  outerClass     : "ibe_outer",    // Class name of outer wrap
  innerClass     : "ibe_inner"     // Class name of inner border
});

Settings Generator


  • text
  • text
  • text

Default

$(selector).insetBorder();
  • text
  • text
  • text

Big Border

$(selector).insetBorder({
  inset: 50
});
  • text
  • text
  • text

Not centered

$(selector).insetBorder({
  insetleft: 60,
  insetright: 40,
  insettop: 14,
  insetbottom: 86
});
  • text
  • text
  • text

Colored Border 

$(selector).insetBorder({
  borderColor: "#000000"
});
  • text
  • text
  • text

Slower Speed

$(selector).insetBorder({
  speed: 500
});
  • text
  • text
  • text

Double Border

$("selector").insetBorder({
  borderType: "double"
});

Rectangles

$("selector").insetBorder();